在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 · 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