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