首页 >web前端 >js教程 >如何使用危险的SetInnerHTML在React中安全地渲染HTML字符串?

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

Linda Hamilton
Linda Hamilton原创
2024-11-15 00:34:02532浏览

How to Safely Render HTML Strings in React Using dangerouslySetInnerHTML?

安全地将 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中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn