在 React 中将获取的数据转换为 HTML

Question

我正在获取数据，我获取的其中一个数据如下所示

<p><strong>This is my first content and it is supposed to represent my index.</strong></p>

这是服务器上的所见即所得输出，当我尝试将其显示在屏幕上时，我得到了它的原样。

请告诉我如何将此数据作为 html 导入我的页面。

Answer 1

dangerouslySetInnerHTML

文档中有一个示例

function createMarkup() {
  return {__html: 'First &middot; Second'};
}

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

顾名思义，如果您 html 没有经过适当的审查，这是很危险的。

有关这方面的详细信息，请阅读文档 here

Answer 2

您可以通过创建对该元素的引用来编译 HTML 中的数据，只需将 innerHTML 属性设置为您获取的数据，其值包含 HTML .

这段代码让您了解更多：

 constructor() {
    super();
    // create reference
    this.titleDiv = React.createRef();

    // this can be whatever you get HTML data from
    this.state ={
      testHTML: "<h1>Test HTML Text</h1>"
    }
  }

  componentDidMount() {
    const element = this.titleDiv.current;
    element.innerHTML = this.state.testHTML;
  }

  render() {
    return (
      // define reference for where you want to set HTML
      <div ref={this.titleDiv}></div>
    )
  }

您可以在此处深入了解 react.js 中的 ref： https://reactjs.org/docs/refs-and-the-dom.html

在 React 中将获取的数据转换为 HTML

Convert fetched data into HTML in React

reactjs

wysiwyg

dangerouslySetInnerHTML