React Render HTML代码（dangerouslySetInnerHTML？）

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

它会显示这样的东西

您需要像这里一样传递字符串而不是对象。
（ 因为它只是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 个解决方案

解决方案1
1 2018-09-07 15:00:13

解决方案2
1 2018-09-07 15:34:04

React Render HTML代码（dangerouslySetInnerHTML？）

问题描述

2 个解决方案

解决方案1 1 2018-09-07 15:00:13

解决方案2 1 2018-09-07 15:34:04

解决方案1
1 2018-09-07 15:00:13

解决方案2
1 2018-09-07 15:34:04