危険な反応の中で、HTMLタグではdangerouslySetInnerHTMLが機能していません。

Question

危険な反応の中で、HTMLタグでdangerSetInnerHTMLが機能していません。 Reactのホームページでも働いていません。タイプ<h1>this is heading.</h1>

どのように私はReactでhtmlタグをレンダリングできますか？ Reactチュートリアルで<em>タグの*を渡したのはなぜですか？彼らはmarkdown（markdownは、HTMLの構文を理解していない）とライブラリRemarkableを使用Reactホームページの例で

Answer 1

、あなただけの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>