Question

我正在构建一个用于呈现Serverinput的应用程序。

现在，我试图弄清楚如何显示纯HTML。因为现在它仅显示为....，所以应该在其中显示图像。

问题是，应在此处何处危险地调用SetInnerHTML（）以显示请求的所有HTML？

正在将字符串存储在要映射的Array（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}} />

Answer 2

我的理解是Array(messageList)包含一个标记字符串列表。

所以您只需要加入他们。

const messageList = [
  "<h2>Header</h2>",
  "<body>This is body!</body>",
  "<footer>Footer!</footer>"
];

function createMarkup() {
  return { __html: messageList.join("") };
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

它会显示如下内容

您需要像在此处那样传递字符串而不是对象。
（只是an implementation of innerHTML ）

{__html: {listItems}}

完整的来源。

import React, { Component } from "react";
import { render } from "react-dom";
import "./styles.css";

const messageList = [
  "<h2>Header</h2>",
  "<body>This is body!</body>",
  "<footer>Footer!</footer>"
];

function createMarkup() {
  return { __html: messageList.join("") };
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: "React"
    };
  }

  render() {
    return (
      <div>
        <MyComponent />
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

正在运行的演示。

React Render HTML代码（dangerouslySetInnerHTML？）

2 个答案: