Reactjs 为什么组件重新加载会强制网页重置滚动位置？

我正在使用Next.js开发一个个人博客。我根据分页的页面查询从API获取帖子，然后循环遍历如下项目：

let内容=(

{props.posts.map（（post）=>{
return
{post.title}
；
})}

);

返回(
{content}
);

这正如预期的那样有效。当我进入下一页时，我会收到新的帖子，页面会保持在相同的滚动位置

但当我将帖子作为一个组件时：

return (
<div className="container">
    <Posts props={props} />
</div>
);

返回(
);

export const Posts=（{props}）=>{
返回(

{props.posts.map（（post）=>{
return
{post.title}
；
})}

);
};

现在，当我点击下一个页面时，Posts组件会被重新命名，新的Posts会被显示，但是滚动位置会被重置，即使我之前滚动到了底部，我现在还是在页面的顶部

为什么会发生这种情况？这是否是因为整个UI都被强制重新加载，实质上重置了滚动位置？如何保持滚动位置

---

感谢并为这个愚蠢的问题感到抱歉，这个问题是不久前从React和Next.js开始的

我不太确定情况是否如此，但我发现有几件事有点奇怪

首先，不要这样传递道具。那太糟糕了。props只是一个参数名，React开发人员可以标准化它来调用传递给组件的内容。像这样传递你的道具

const { posts } = props;
return (
  <div className="container">
    <Posts posts={posts} />
  </div>
);

---

这样一来，因为Posts只将

Posts

作为它的道具，如果

Posts

的值没有改变，那么您的

Post

组件将不会重新播放，希望。。？事情会按你所希望的方式进行。

谢谢你的提示，我试了一下备忘录，弄得有点乱——没有任何帮助。但我发现，滚动位置未恢复/维护的主要问题可能是由于使用了getServerSideProps和next-i18next模块

export const Posts = ({ props }) => {
  return (
    <ul>
      {props.posts.map((post) => {
        return <li key={post.id}>{post.title}</li>;
      })}
    </ul>
  );
};

const { posts } = props;
return (
  <div className="container">
    <Posts posts={posts} />
  </div>
);

const Posts = ({ posts }) => {
  return (
    <div className="posts">
      <ul>
        {posts.map((post) => {
          return <li key={post.id}>{post.title}</li>;
        })}
      </ul>
    </div>
  );
};

export default React.memo(Posts);