html - 在 React 中 dangerouslySetInnerHTML 不适用于 html 标签。

Question

在 React 中危险的是，SetInnerHTML 不适用于 html 标签。它甚至不在 React 的主页上工作.输入 <h1>this is heading.</h1>

我如何在 React 中渲染 html 标签？为什么我们为 <em> 传递 * React 教程中的标签？

Answer 1

在 React 主页示例中，他们使用 markdown (markdown 不理解 HTML 语法) 和库 Remarkable ., 如果你只想使用 HTML 从 rawMarkup 方法中移除 Remarkable - { __html: this.state.value }

var HTMLEditor = React.createClass({
  getInitialState: function() {
    return {value: 'Put here <h1>HTML</h1>'};
  },
  
  handleChange: function(e) {
    this.setState({ value: e.currentTarget.value });
  },
  
  markup: function() {
    return { __html: this.state.value };
  },
  
  render: function() {
    return (
      <div className="html-editor">
        <textarea
          onChange={ this.handleChange }
          defaultValue={this.state.value} />
      
        <div
          className="html-editor__content"
          dangerouslySetInnerHTML={ this.markup() }
        />
      </div>
    );
  }
});

ReactDOM.render(<HTMLEditor />, document.getElementById('container'));

.html-editor {
  border: 1px solid #000;
  padding: 10px;
}

.html-editor__content {
  margin: 10px 0 0 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container"></div>