javascript - 如何在reactjs中动态呈现时在列表中追加元素

Question

我想显示一个数组中的消息列表。在该列表元素中包含“div”的子元素。根据使用该特定 div 的 id 的情况，需要在该子元素中附加更多 div。

但是我从document.getElementById和React.createRef()方法都得到了 null 。我试过下面的示例源，

this.state.messageDetail.map((message, index) => {
  return (
    <React.Fragment key={index}>
      {(index === 0 ||
        this.isSameDate(
          message.created_ts,
          this.state.messageDetail[index - 1].created_ts
        )) && (
        <li className="date">
          <span>{moment.unix(message.created_ts).format("MMM DD, YYYY")}</span>
        </li>
      )}
      {(index === 0 ||
        this.isSenderAndTimeSame(
          message.sender_id,
          message.created_ts,
          index
        )) && (
        <li className="user" ref={this.userDetailRef}>
          <React.Fragment>
            <div className="img">
              <img
                alt=""
                src={
                  message.sender_id === null
                    ? CURRENT_USER_IMAGE
                    : BUCKET_PATH + "/" + this.state.currentTimeline.image
                }
              />
            </div>
            <div id={"user_detail_" + index} className="details">
              <div className="details-header">
                <span className="userName">
                  {message.sender_id === null
                    ? CURRENT_USER_NAME
                    : this.state.currentTimeline.name}
                </span>
                <span className="time">
                  {moment.unix(message.created_ts).format("hh:mm A")}
                </span>
              </div>
              <div className="message">{message.message_body}</div>
            </div>
          </React.Fragment>
        </li>
      )}
    </React.Fragment>
  );
});

在上面的示例中，isSenderAndTimeSame方法将通过查找 div id（即user_detail_3）创建并附加一个新的子元素。我得到空值。请建议您最好的方法。

我正在添加一个 UI 图像：

标签： javascripthtmlreactjs