发送或接收新消息时自动滚动

Posted 2023-02-19

【中文标题】发送或接收新消息时自动滚动

【英文标题】：Auto Scroll When new message send or received

【发布时间】：2021-10-29 04:29:43

【问题描述】：

// 嗨，我正在创建一个简单的chat Application。在这个component 中，我正在显示用户之间的所有消息。一切都按预期工作。现在我想要user receives 或sends 新message 我希望它应该自动滚动到最后一条消息.现在我想添加这个功能

import React 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];

  return (
    <>
      allmessages &&
        allmessages
          .filter((item) => 
            console.log("item", item.from, item.to, chatWith.id);
            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>
          ))
    </>
  );


export default ShowMessages;

【参考方案1】：

现在你有一个组件 ShowMessages，它呈现消息，但在你的 sn-p 中我看不到任何容器（也许你有一个不同的组件）。我要做的是在包含所有消息的容器上放置一个引用（通过使用“useRef”）。 并且每次添加任何消息（这可以通过 useEffect 跟踪）时，您都可以通过 ref 访问容器（不要忘记使用 .current）。然后，您可以选择如何从此线程向下滚动 - Scroll to bottom of div? 第一个答案应该可以正常工作。请记住，您通过 ref 获取元素！