Question

我有一个React组件，正在渲染div。但是，我希望将此div渲染为使其最初一直滚动到底部。

我知道可以通过使用ref并在scrollTop（或componentDidMount）中设置useEffect属性来实现，但是当{最初呈现{1}}。

如果使用在DOM元素上已设置的div属性渲染div，则不会发生闪烁。

React不支持scrollTop的{{1}}属性。那么，在挂载组件之前，是否有任何方法可以设置初始scrollTop值？

Answer 1

您可以使用useLayoutEffect挂钩在所有DOM突变后同步运行一些逻辑。在浏览器有机会绘画之前，这些更新将被同步刷新。

const { useRef, useLayoutEffect } = React;

function App() {
  const ref = useRef(null);

  useLayoutEffect(() => {
    ref.current.scrollTop = ref.current.scrollHeight;
  }, []);

  return (
    <div
      ref={ref}
      style={{
        height: 100,
        overflowY: "scroll"
      }}
    >
      <div style={{ height: 1000 }} />
      <div>Foo</div>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>

在React中使用初始scrollTop值设置渲染div

1 个答案: