Question

因此，我要从数据库中获取一些消息，然后在聊天div中显示这些消息。这是代码：

componentDidMount（）：

socketio.on("message", function(data) {
  // socketio is initialized outside of class
  // and the server emits "message" on client connection
  that.setState({
    // before this happens, there is no "messages" var in state
    messages: data
  });
});

render（）：

<div class="chatbox">
{messages &&
 messages !== undefined &&
 messages.length > 0 ? (
 messages.map(function(item, i) {
           if (item.from === uid) return <div class="message-incoming">{item.body}</div>;
           else return <div class="message-outgoing">{item.body}</div>;
    })) : (
        <></>     
    )
}
</div>

该消息被装入类“ chatbox”的div中。我想做的就是等待这些消息呈现出来，然后手动将“聊天框”滚动到底部，以便用户可以看到最新消息。但是到目前为止，我还没有找到一种使之起作用的方法，因为无论我尝试使用哪种代码，它都会在地图完成之前而不是之后触发。基本上我想做：

document.getElementById("chatbox").scrollTop = 
    document.getElementById("chatbox").scrollHeight;

但是无论我在哪里执行此代码，scrollHeight始终与“聊天框”的初始高度相同，因为该行是在呈现所有消息之前触发的。我想在div完全加载后触发它。

有什么想法吗？

Answer 1

如果messages尚未填充，则返回null：

render() {

    if(!this.state.messages) return null;

    <div class="chatbox">
    ...

Answer 2

我建议您使用componentDidUpdate lifecycle method滚动到底部。

componentDidUpdate()在更新发生后立即被调用。初始渲染未调用此方法。

使用此机会在组件更新后在DOM上进行操作。 [...]

class ChatComponent extends Component {

    componentDidUpdate(prevProps, prevState) {
        if (prevState.messages.length != this.state.messages.length) { // Or any other comparison
            document.getElementById("chatbox").scrollTop = document.getElementById("chatbox").scrollHeight;
        }
    }

    /* ... */
}

反应-等待div完全加载

2 个答案: