如何使用危险的SetInnerHTML在React中安全地渲染HTML字符串？

安全地将 HTML 字符串渲染为 HTML

在这种情况下，尝试渲染正常的 HTML 内容字符串时会出现问题，但它而是显示为字符串而不被解释为 HTML。当angerlySetInnerHTML 中使用的属性是对象而不是字符串时，通常会遇到这种情况。

要解决此问题，请确保 this.props.match.description 属性是字符串。如果不是，请在将其分配给属性之前将其转换为 HTML。

处理 HTML 实体

处理 HTML 实体时会出现其他复杂情况。在这种情况下，您需要先对实体进行解码，然后再将其传递给angerlySetInnerHTML。

示例代码

请考虑以下示例代码：

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      description: '<p><strong>Our Opportunity:</strong></p>',
    };
  }

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

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

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

在此示例中，description 属性包含 HTML 实体（< 和 >）。为了正确渲染它，在将 HTML 传递给angerlySetInnerHTML 之前，使用 htmlDecode 函数对这些实体进行解码。

以上是如何使用危险的SetInnerHTML在React中安全地渲染HTML字符串？的详细内容。更多信息请关注PHP中文网其他相关文章！