Javascript React渲染组件与Array.map自动向下滚动

我在React中有一个ProjectsSection组件和一个项目对象数组。最初它只渲染前3个项目。我还有一个按钮，当它被点击时，所有其他对象也会被渲染

const showMoreProjects = () => {
    if (projectsToShow === 3) {
      setProjectsToShow(projects.length)
      showBtn.current.innerHTML = 'show less'
    } else {
      setProjectsToShow(3)
      showBtn.current.innerHTML = 'show more'
    }
  }

<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
{
    projects.slice(0, projectsToShow).map(project => <Project key={project.title} details={project} />)
}
</div>

<button ref={showBtn} onClick={showMoreProjects}>view more</button>

const showMoreProjects=（）=>{
如果（projectsToShow==3）{
setProjectsToShow（projects.length）
showBtn.current.innerHTML='show less'
}否则{
setProjectsToShow（3）
showBtn.current.innerHTML='show more'
}
}
{
projects.slice（0，projectsToShow）.map（project=>）
}
查看更多

这是项目组件

<div ref={project} className="project relative w-full h-64 bg-gray-800 rounded-lg bg-cover bg-center overflow-hidden"
      style={{ backgroundImage: `url(${details.imgUrl})` }}>
      <div className="w-full h-full flex justify-center items-center">
        <div className="project-card-hover opacity-0 hover:opacity-100 transition-opacity duration-300 ease-in-out w-full h-full">
          <div className="w-full h-full flex flex-col justify-center items-center bg-black bg-opacity-50">
            <h1 className="text-4xl text-white mb-8">{details.title}</h1>
            <div className="w-1/2 flex justify-around items-center text-white text-2xl">
              <a href={details.link} target="_blank" rel="noopener noreferrer"><FontAwesomeIcon icon={faLink} /></a>
              <a href={details.github} target="_blank" rel="noopener noreferrer"><FontAwesomeIcon icon={faGithub} /></a>
              <a href={details.play} target="_blank" rel="noopener noreferrer"><FontAwesomeIcon icon={faPlay} /></a>
            </div>
          </div>
        </div>
      </div>
    </div>

{details.title}

---

显示更多项目时，浏览器将自动向下滚动到最后渲染的组件！这可以防止吗？

当鼠标按下时，按钮的默认行为是使其聚焦。这可能会导致您所认为的滚动行为。要避免此默认行为，可以将事件处理程序放置在

mousedown

事件上，而不是

click

，并调用事件的

preventDefault

方法：

const showMoreProjects = (event) => {
  event.preventDefault();
  if (projectsToShow === 3) {
    setProjectsToShow(projects.length)
    showBtn.current.innerHTML = 'show less'
  } else {
    setProjectsToShow(3)
    showBtn.current.innerHTML = 'show more'
  }
}

// ...

<button ref={showBtn} onMouseDown={showMoreProjects}>view more</button>

const showMoreProjects=（事件）=>{
event.preventDefault（）；
如果（projectsToShow==3）{
setProjectsToShow（projects.length）
showBtn.current.innerHTML='show less'
}否则{
setProjectsToShow（3）
showBtn.current.innerHTML='show more'
}
}
// ...
查看更多

此处没有任何内容会导致滚动。你确定你的

项目
组件中没有你需要共享的东西吗？我更新了问题，我想这是因为它关注我按下的按钮或其他东西！啊，是的，可能就是这样。有一种方法可以解决这个问题。我能想到的唯一一件事就是在项目部分的开头使用scrollIntoView，但对我来说这似乎是一个糟糕的设计。你有什么建议吗？谢谢！就这样！preventDefault和onMouseDown都是，而不是我使用的onClick！