React Render HTML代码（dangerouslySetInnerHTML？）

Question

I am building an App where Serverinput is being rendered. 我正在构建一个正在呈现Serverinput的应用程序。

Now I am trying to figure out, how it´s possible to display pure HTML. 现在，我试图弄清楚如何显示纯HTML。 Because now it is only displayed as ...., where it should show an Image. 因为现在它仅显示为..，所以应该在其中显示图像。

The question is, where should one call dangerouslySetInnerHTML() here to display all HTML as requested? 问题是，应在此处何处危险地调用SetInnerHTML（）以显示请求的所有HTML？

The Strings are being stores in an Array(messageList) that is being mapped. 字符串存储在要映射的Array（messageList）中。 Userinput is escaped, so theres no problem on that side. 用户输入已转义，因此该侧没有问题。

  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>
  );

Thanks a lot for any help that is given. 非常感谢您提供的任何帮助。

I updated the dangerousHTML where I thought it would work. 我在危险的HTML上进行了更新。 But now it throws - Syntax error: Unexpected token, expected } 但是现在抛出了-语法错误：意外的令牌，预期的}

Answer 1

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

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

Answer 2

How I understood is that Array(messageList) contains a list of markup strings. 我的理解是Array(messageList)包含一个标记字符串列表。

So you just need to join them. 因此，您只需要加入他们。

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

It'd display something like this 它会显示这样的东西

You need to pass a string not an object as you do here. 您需要像这里一样传递字符串而不是对象。
( as it's just an implementation of innerHTML ) （ 因为它只是innerHTML的实现 ）

{__html: {listItems}}

Full source for completeness. 完整的完整来源。

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"));

Working demo. 工作演示。

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