在 React 中，SetInnerHTML 不适用于 html 标签。

Question

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

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

Answer 1

在React主页示例中，他们使用（不懂 HTML 语法）和 library .，如果您只想使用 HTML从方法中删除-markdownmarkdownRemarkableRemarkablerawMarkup{ __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>