在React中渲染一个div并设置初始scrollTop值

Question

我有一个 React 组件正在渲染div. 不过，我希望div将其渲染为最初一直滚动到底部。

我知道这可以通过使用 a 并在(或 in ) 中ref设置属性来实现，但这会在最初渲染时导致闪烁。scrollTopcomponentDidMountuseEffectdiv

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

React 不scrollTop支持div. 那么有没有办法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>