在React dangerouslySetInnerHTML不适用于html标签。

Question

在React dangerouslySetInnerHTML不适用于html标签。它甚至没有在React的主页上工作。输入<h1>this is heading.</h1>

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

Answer 1

在React主页示例中，他们使用markdown （markdown不懂HTML语法）和库Remarkable。，如果你想仅使用HTML从Remarkable方法移除rawMarkup - { __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>