时间戳

首页 > 解决方案 > React - 等待 div 完全加载

reactjs - React - 等待 div 完全加载

问题描述

所以我从数据库中获取了一些消息，然后我想在聊天 div 中显示它们。这是代码：

组件DidMount（）：

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
  });
});

使成为（）：

<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>

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

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

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

有任何想法吗？

标签： reactjs

解决方案

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

render() {

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

    <div class="chatbox">
    ...

推荐阅读