React挂载时设置div滚动高度报错问题及解决方法咨询

我有一个包含多个<p/>标签的<div>容器，通过useRef定义了divRef并初始化为null，代码如下：

<div ref={divRef} style={styles.messageListContainer}>
      <p>Placeholder</p>
      // 这里还有多个<p/>标签
</div>

容器的CSS样式：

messageListContainer: {
    height: '100vh',
    width: '100%',
    paddingBottom: 20,
    flexDirection: "column",
    display: "flex",
    overflow: "auto",
},

我需要组件挂载时让这个div自动滚动到底部，用户可以向上查看历史内容，且不想用scrollIntoView（避免滚动动画）。但用以下useEffect实现时出现错误：Cannot read properties of null (reading 'scrollHeight')。请问错误原因是什么？怎么实现需求？

对应的useEffect代码：

useEffect(() => {
    divRef.current.scrollTop = divRef.current.scrollHeight
}, [])

错误原因 #

这个错误的核心是组件挂载时目标DOM元素还未完成渲染，divRef.current仍为null：

• React中，空依赖数组的useEffect会在组件首次挂载完成后执行，但如果<div>内部的内容（比如多个<p>标签）是异步加载的，或者组件存在条件渲染逻辑（比如该<div>被包裹在{condition && ...}中，初始condition为false），会导致useEffect执行时divRef还未指向任何真实DOM元素，自然无法读取scrollHeight属性。

解决方案 #

1. 添加入门级空值校验 #

先给divRef.current加空值判断，避免读取null的属性，适用于DOM只是轻微延迟渲染的场景：

useEffect(() => {
    if (divRef.current) {
        divRef.current.scrollTop = divRef.current.scrollHeight;
    }
}, [])

2. 监听动态内容的变化 #

如果容器内的<p>标签是动态生成的（比如从接口获取数据后渲染），需要将内容状态加入useEffect的依赖数组，确保内容更新后重新执行滚动逻辑：

const [messages, setMessages] = useState([]);

// 示例：异步获取消息内容
useEffect(() => {
    fetch('/api/messages')
        .then(res => res.json())
        .then(data => setMessages(data));
}, [])

// 监听messages变化，滚动到底部
useEffect(() => {
    if (divRef.current) {
        divRef.current.scrollTop = divRef.current.scrollHeight;
    }
}, [messages])

3. 用useLayoutEffect替代useEffect #

useLayoutEffect会在DOM更新完成后、浏览器绘制前同步执行，比useEffect更早接触到DOM元素，适合需要立即操作DOM的场景：

useLayoutEffect(() => {
    if (divRef.current) {
        divRef.current.scrollTop = divRef.current.scrollHeight;
    }
}, [])

注意：useLayoutEffect是同步执行的，不要在其中编写耗时逻辑，避免阻塞浏览器渲染。

4. 处理条件渲染场景 #

如果<div>是条件渲染的，需要将渲染条件变量加入依赖数组，确保条件满足时再执行滚动：

const [showMessageList, setShowMessageList] = useState(false);

useEffect(() => {
    if (showMessageList && divRef.current) {
        divRef.current.scrollTop = divRef.current.scrollHeight;
    }
}, [showMessageList])

// 条件渲染容器
{showMessageList && (
    <div ref={divRef} style={styles.messageListContainer}>
        {messages.map(msg => <p key={msg.id}>{msg.content}</p>)}
    </div>
)}

内容的提问来源于stack exchange，提问作者Max adam