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

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>
);