如何在 React 中正确渲染 HTML 字符串？

将 HTML 字符串呈现为真实 HTML

尝试将 HTML 内容显示为真实 HTML 时，某些情况可能会导致意外结果，其中字符串呈现为文本而不是解释为 HTML。要解决此问题，至关重要的是确保 HTML 字符串用双引号引起来，并在必要时进行解码。

解决此问题的一种方法是将 HTML 字符串用危险地SetInnerHTML 属性中的双引号引起来，如下所示下面的示例演示了：

<div dangerouslySetInnerHTML={{ __html: '" <h1>Hi there!</h1>" ' }} />

但是，如果 HTML 字符串存储为对象，则不会将其呈现为 HTML。在这种情况下，必须先将对象转换为字符串，然后再将其分配给angerouslySetInnerHTML。

class App extends React.Component {

constructor() {
    super();
    this.state = {
      description: {
        children: "something",
        style: {
          color: "red"
        }
      }
    }
  }
  
  render() {
    return (
      <div dangerouslySetInnerHTML={{ __html: JSON.stringify(this.state.description) }} />
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

此外，在处理HTML字符串中的HTML实体时，必须在将它们分配给dangerouslySetInnerHTML之前对其进行解码。这可以使用 htmlDecode 函数来实现：

class App extends React.Component {

  constructor() {
    super();
    this.state = {
      description: '<p>&amp;lt;strong&amp;gt;Our Opportunity:&amp;lt;/strong&amp;gt;</p>'
    }
  }

    htmlDecode(input){
    var e = document.createElement('div');
    e.innerHTML = input;
    return e.childNodes.length === 0 ? &quot;&quot; : e.childNodes[0].nodeValue;
  }

  render() {
    return (
      <div dangerouslySetInnerHTML={{ __html: this.htmlDecode(this.state.description) }} />
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

以上是如何在 React 中正确渲染 HTML 字符串？的详细内容。更多信息请关注PHP中文网其他相关文章！