React Render HTML Code（dangerouslySetInnerHTML？）

Question

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

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

问题是，应该在哪里调用dangerouslySetInnerHTML（）来显示所有请求的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 Code（dangerouslySetInnerHTML？）

问题描述投票：0回答：2

2个回答

最新问题

React Render HTML Code（dangerouslySetInnerHTML？）

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2