React 如何使页面允许向下滚动？

Question

我正在尝试创建聊天消息，但我不知道如何让聊天每次都向下滚动。当用户输入新消息时，我希望它始终向下滚动，以便我们可以在底部看到新消息。我觉得这是需要编辑的。

const MessageContainer = styled.div`
    display: flex;
    flex-direction: column;
    overflow-y: auto;
`

Answer 1

您可以在聊天底部保留一个虚拟 div，然后在您的组件更新时滚动到它（即状态随着新消息的添加而更新）：

const [message, setMessage] = useState([]);
const [text, setText] = useState(1);
const messagesEndRef = useRef(null);
const scrollToBottom = () => {
  messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
};
useEffect(scrollToBottom, [message]);

const addText = () => {
  setMessage([...message, text]);
  setText((data) => data + 1);
}

return (
  <div className="App">
    <div className="data">
      {message.map(m => (
        <span key={m}>{m}</span>
      ))}
      <div ref={messagesEndRef} />
    </div>
    <button onClick={addText} className={'button'}>Add Text</button>
  </div>
);

https://codesandbox.io/s/great-feynman-5m3i7?file=/src/App.js

Answer 2

你可以试试：

const MessageContainer = styled.div`
    display: flex;
    flex-direction: column-reverse;
    overflow-y: auto;
`

或者

我为你制作了 sample(CodeSandBox)，但我不确定这是否是你想要的。

它喜欢：

希望能帮到你！