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

【问题标题】：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;

【问题讨论】：

标签： javascript html css reactjs redux

【解决方案1】：

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

【讨论】：