在不更改 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

试试这个：

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

Answer 2

要保持滚动位置，您可以使用 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])

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

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

Rendering html on top without changing viewport in React?

html

css

render

viewport

reactjs