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

Question

在 React 中 dangerouslySetInnerHTML 不适用于 html 标签。它甚至无法在 React. Type <h1>this is heading.</h1>

的主页上运行

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

Answer 1

在 React 主页示例中，他们使用 markdown(markdown does not understand HTML syntax) and library 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>

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

In React dangerouslySetInnerHTML is not working for html tags.

html

reactjs

markup