嘿，这个需求在聊天应用里太常见啦！我来帮你给ShowMessages组件加上自动滚动到最新消息的功能，只需要几个简单的步骤就能搞定：

步骤1：添加DOM引用（useRef） #

首先，我们需要给消息列表的容器元素加一个useRef，这样才能获取到DOM节点并控制滚动行为。你可以把现有的消息列表包裹在一个<ul>容器里，然后绑定这个ref。

步骤2：监听消息变化并触发滚动 #

用useEffect钩子监听消息列表allmessages和当前聊天对象chatWith.id的变化——不管是新消息发送/接收，还是切换了聊天对象，都自动滚动到列表底部。

修改后的完整代码 #

import React, { useRef, useEffect } from "react";
import { Link } from "react-router-dom";
import { useSelector } from "react-redux";

function ShowMessages() {
  const currentUserName = useSelector(
    (state) => state.user.currentUser.username
  );
  const allmessages = useSelector((state) => state.message.allMessage);
  const chatWith = useSelector((state) => state.user.chatWith);
  const LoggedInUser = currentUserName && currentUserName.split("@")[0];
  
  // 创建ref指向消息列表容器
  const messagesEndRef = useRef(null);

  // 监听消息和聊天对象变化，自动滚动到底部
  useEffect(() => {
    if (messagesEndRef.current) {
      // 方式1：直接跳转到底部（无平滑动画）
      messagesEndRef.current.scrollTop = messagesEndRef.current.scrollHeight;
      
      // 方式2：平滑滚动到最后一条消息（可选，带动画效果）
      // const lastMessage = messagesEndRef.current.lastElementChild;
      // if (lastMessage) {
      //   lastMessage.scrollIntoView({ behavior: 'smooth' });
      // }
    }
  }, [allmessages, chatWith.id]); // 依赖项：消息列表和当前聊天对象ID

  return (
    <ul ref={messagesEndRef} className="message-list"> {/* 把ref绑定到容器上 */}
      {allmessages && allmessages
        .filter((item) => {
          return item.fromto === chatWith.id;
        })
        .map((item, idx) => (
          <li className={item.direction === "send" ? "replies" : "sent"} key={idx}>
            <div className="media">
              <h5>
                {item.messageBody}
              </h5>
            </div>
          </li>
        ))}
    </ul>
  );
}

export default ShowMessages;

关键说明 #

• useRef：用来存储消息列表容器的DOM节点，让我们能直接操作它的滚动属性。
• useEffect：当消息列表更新或者切换聊天对象时，自动触发滚动逻辑，确保用户总能看到最新消息。
• 两种滚动方式：你可以根据需求选——直接跳转更高效，平滑滚动则有更好的视觉体验，注释里已经给出了两种实现，按需开启即可。

这样修改后，每次有新消息出现或者切换聊天对象，页面都会自动滚动到最新的消息位置啦！

内容的提问来源于stack exchange，提问作者Ghulam Azam Khan