Question

我想在React中的另一个组件<Top />上方渲染一个组件<Bottom />。结构是这样的：

...
[top, setTop] = useState(false);
[bottom, setBottom] = useState(true);
...

return (
<div>
 top && (<Top />)
 bottom && (<Bottom />)
 <button onClick = { () => setTop(true) } />
</div>
)

问题是，当用户看到<Bottom />并单击呈现<Top />的按钮时，视口会发生变化，因为对“ <Top />进行了“即时滚动”。

是否有一种方法可以渲染组件，但保持视口（用户当前所见）静止？

我应该使用CSS还是javascript技巧？

Answer 1

要保持滚动位置，可以使用useEffect钩子对元素的引用。这是一个提示：

useEffect(() => {
  // keep scroll position of bottom elememnt
  let currentPosition = bottomElementRef.scrollTop // first run
  if (top) {
   // update scroll position when top element is appended
   bottomElementRef.scrollTop = currentPosition // second run when top
  }
},[top])

希望，这可以帮助您解决问题。

Answer 2

尝试一下：

return (
  <div>
    {top && <Top />}
    {bottom && <Bottom />}
    <button onClick={() => setTop(true)} />
  </div>
);

在不更改视口的情况下在顶部渲染html？

2 个答案: