javascript - React 渲染 HTML 代码(dangerouslySetInnerHTML？)

Question

我正在构建一个正在渲染 Serverinput 的应用程序。

现在我想弄清楚如何显示纯 HTML。因为现在它只显示为 ....，它应该显示图像。

问题是，应该在哪里调用angerlySetInnerHTML()来按请求显示所有HTML？

字符串存储在正在映射的数组(messageList)中。用户输入被转义，因此这方面没有问题。

  let listItems = messageList.map(d => (
   <div >
     <p className={d.senderId + "timestamp"}>{d.time}</p>
     <p className={d.senderId} key={d.idCount} ref={d.idCount}>
       {" "}
        {d.text}{" "}
    </p>
   </div>
 ));

  let gif1 = <img className="gif" alt="" src={gif} />;

  return (
    <div >
      <div dangerouslySetInnerHTML={__html: {listItems}} />
      <ul>{listItems}</ul>

    </div>
  );

非常感谢您提供的任何帮助。

我更新了危险的HTML，我认为它可以工作。但现在它抛出 - 语法错误:意外的标记，预期 }

Answer 1

对于要显示动态内容的每个元素，您应该有类似的内容

<div dangerouslySetInnerHTML={__html: {yourHtmlContent}} />