我目前正在做一个学校的聊天应用程序，但我想让它像大多数聊天应用程序一样自动滚动到底部。到目前为止，我已经尝试了所有我能找到的解决方案，但我只得到了反应错误。我是新的反应，所以可能会有一些错误，我没有意识到我正在犯。这是我的东西
class Messages extends React.Component {
updateScroll() {
let element = document.querySelector(".messages");
element.scrollTop = element.scrollHeight;
}
render() {
const messages = store.getState().messages.map((msg) => {
this.updateScroll();
return (
<Message
name={msg.displayName}
message={msg.text}
time={msg.timestamp}
pic={msg.pic}
key={msg.timestamp}
clas={msg.who}
/>
);
});
return (
<div className="messages">
<div className="chat">
</div>
<div className="sendMessage">
<input
type="text"
placeholder="Message epic channel"
className="pendingMessage"
onKeyPress={this.handleKeyDown}
/>
<button onClick={this.handleMessageSend}>Send</button>
</div>
</div>
);
}
}
export default Messages;
如果您还想要完整的代码，下面是我的GitHub链接。https://github.com/dougalcaleb/react-chat-app
谢啦！
我建议你应该用css来做这件事
chatbox内容需要以下标记，其中内容与底部对齐。
.container {
height: 100px;
overflow: auto;
display: flex;
flex-direction: column-reverse;
}
应该使用参考而不是单据查询
class Messages extends React.Component {
constructor() {
super()
this.messagesRef = React.createRef()
}
updateScroll() {
this.messagesRef.current.scrollTo(0, this.messagesRef.current.scrollHeight)
}
render() {
const messages = store.getState().messages.map((msg) => {
this.updateScroll();
return (
<Message
name={msg.displayName}
message={msg.text}
time={msg.timestamp}
pic={msg.pic}
key={msg.timestamp}
clas={msg.who}
/>
);
});
return (
<div ref={this.messagesRef} className="messages">
<div className="chat">
</div>
<div className="sendMessage">
<input
type="text"
placeholder="Message epic channel"
className="pendingMessage"
onKeyPress={this.handleKeyDown}
/>
<button onClick={this.handleMessageSend}>Send</button>
</div>
</div>
);
}
}
export default Messages;
你能用ref+scrollTo试试吗？
在消息下面创建一个虚拟div。
<div ref={messagesEndRef}></div>
const messagesEndRef = useRef(null)
const [msglist, setMsglist] = useState([]);
如果msglist是新消息的列表，则使用useEffect来处理更改。
useEffect(() => {
messagesEndRef.current.scrollIntoView({ behavior: 'smooth' })
}, [msglist])
