在React中，SetInnerHTML不適用於html標簽。

Question

在React中，SetInnerHTML不適用於html標簽。 它甚至不在React的主頁上工作。 鍵入<h1>this is heading.</h1>

我該如何在React中渲染HTML標簽？ 為什么我們在React教程中為* <em>標簽傳遞*？

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>