时间戳

首页 > 解决方案 > 附加 ul li 元素以响应 DOM

javascript - 附加 ul li 元素以响应 DOM

问题描述

嗨，我有用 java-script 编写的代码，并且工作正常，现在由于某些原因我需要将其转换为反应，我在谷歌中搜索过这个但不幸的是没有找到任何有用的东西，下面是我的用javascript编写的代码

let message_pane = $(".msg_card_body");
let currentTime = formatAMPM(new Date());
 message_pane.append(
        "<div class='d-flex justify-content-start'>" +
        "<div class='msg_cotainer'>" +
        "<div class='msg_time'>You "+"<span>"+ currentTime +"</span>"+"</div>" +
        "<div>"+text+"</div>" +
        "</div>" +
        "</div>");

尝试过的方法

设定状态：-

state = {
remoteStreams: [],
Message:'',
incomemsgs:[],
};

将味精附加到状态

let me = this;
  // console.warn(text + 'received');
  me.setState(
  {
    incomemsgs: {
      text
    }
  })

渲染：-

   {Object.keys(this.state.incomemsgs).map(key => {
              let msgs = this.state.incomemsgs[key];
              return (
                <div
                  key={msgs}
                />
              );
            })}

但是上面尝试过的事情没有奏效，这可能是一个愚蠢的问题，但我真的在这里停留了很长时间，任何帮助或建议都非常感谢。

标签： javascripthtmlreactjs

解决方案

您的 append 函数会在每条消息中添加相同的元素组。在这种情况下，这部分

"<div class='d-flex justify-content-start'>" +
    "<div class='msg_cotainer'>" +
    "<div class='msg_time'>You "+"<span>"+ currentTime +"</span>"+"</div>" +
    "<div>"+text+"</div>" +
    "</div>" +
    "</div>"

可以转换成 React 组件。

import React from "react";

const MessageDisplay = props => {
  return (
    <div className="d-flex justify-content-start">
      <div className="msg_cotainer">
        <div className="msg_time">
          You <span>{props.receiveTime}</span>
        </div>
        <div>{props.text}</div>
      </div>
    </div>
  );
};

export default MessageDisplay;

现在这个组件可以从一组 Message 对象中呈现。我创建了一个模拟这个的代码框

看这里

我在“messageBank”常量中设置了一些预定义的消息，这些消息在 useEffect 内以 1 秒的间隔“接收”，以模拟接收消息并通过 map 方法更新页面。

推荐阅读