如何将HTML字符串呈现为真正的HTML？

javascript html reactjs jsx

2022-08-30 00:01:21

以下是我尝试过的内容以及它是如何出错的。

这有效：

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

这不会：

<div dangerouslySetInnerHTML={{ __html: this.props.match.description }} />

说明属性只是 HTML 内容的普通字符串。但是，由于某种原因，它被呈现为字符串，而不是HTML。

有什么建议吗？

答案 1

是字符串还是对象？如果它是一个字符串，它应该被转换为HTML就好了。例：this.props.match.description

class App extends React.Component {

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

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

结果：http://codepen.io/ilanus/pen/QKgoLA?editors=1011

但是，如果描述没有引号，您将获得：<h1 style="color:red;">something</h1>''

Object {
$$typeof: [object Symbol] {},
  _owner: null,
  key: null,
  props: Object {
    children: "something",
    style: "color:red;"
  },
  ref: null,
  type: "h1"
}

如果它是一个字符串，而你没有看到任何HTML标记，我看到的唯一问题是错误的标记。

更新

如果您正在处理HTML实体，则需要在将它们发送到之前对其进行解码，这就是为什么它被称为“危险地”:)dangerouslySetInnerHTML

工作实例：

class App extends React.Component {

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

   htmlDecode(input){
    var 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'));

答案 2

我使用'react-html-parser'

yarn add react-html-parser

import ReactHtmlParser from 'react-html-parser'; 

<div> { ReactHtmlParser (html_string) } </div>

npmjs.com 来源

提升@okram的评论以提高可见性：

从其github描述：将HTML字符串直接转换为React组件，避免了使用危险的SetInnerHTML from npmjs.com 将HTML字符串转换为React组件的实用程序。避免使用危险的SetInnerHTML，并将标准的HTML元素，属性和内联样式转换为它们的React等效项。