React 中如何在点击或提交时将消息容器 div 滚动到底部

完全不需要依赖jQuery的全局DOM查询能力，通过React原生提供的引用绑定和副作用钩子即可实现，整个逻辑完全贴合React的组件化设计原则，无选择器冲突、无额外性能损耗。

具体实现步骤 #

• 引入函数组件所需的原生钩子：在组件顶部导入useRef、useEffect
• 为消息列表容器创建引用：实例化ref对象并绑定到承载消息列表的DOM节点上，替代全局选择器的查找逻辑

  // 在组件内部创建ref实例
  const messageListRef = useRef(null);
  
  // 原代码中承载消息的div修改为绑定ref的形式
  <div className="Messages" ref={messageListRef}>
    {messages}
  </div>
  

• 编写自动滚动的副作用逻辑：监听消息列表数据的长度变化，只要新增消息（不管是自己发送还是接收远端推送），就在DOM渲染完成后自动将容器滚动到最底部

  // 监听消息列表长度变化，自动执行滚动
  useEffect(() => {
    // DOM渲染完成后，ref绑定的节点一定存在，做一次非空判断避免边界报错
    if (messageListRef.current) {
      // 将容器的纵向滚动位置设置为整个内容的高度，即可实现精准滚到底部
      messageListRef.current.scrollTop = messageListRef.current.scrollHeight;
    }
  }, [props.roomMessages.length]); // 依赖仅绑定消息长度，避免组件无关重渲染时重复执行滚动
  

• 细节优化：原代码中渲染消息列表时使用数组下标index作为key，会在列表顺序变动时出现渲染异常，替换为消息自带的唯一id作为key即可：

  const messages = props.roomMessages.map((message) => {
    return (
      <Message 
        key={message.id}
        name={message?.name}
        message={message?.message}
      />
    )
  })
  

方案优势 #

• 所有DOM操作都通过React直接绑定的节点引用完成，不存在全局选择器匹配错误的问题
• 依赖项精确绑定消息列表长度，仅在有新消息时才触发滚动，性能开销极低
• 滚动逻辑和消息发送的提交逻辑完全解耦，后续接入WebSocket接收远端消息时，不需要额外修改滚动相关代码，只要消息列表更新就会自动触发滚动

补充进阶优化（可选） #

如果需要避免用户向上翻看历史消息时被强制拉回底部，可以在触发滚动前加判断：仅当用户当前滚动位置距离底部不足100px时，才自动触发滚到底部，否则弹出新消息提示引导用户点击跳转。

内容的提问来源于stack exchange，提问作者Ken Ryan