HTMLを反応コンポーネントにレンダリングする方法

Question

いくつかの外部ソースからの純粋なHTMLを反応コンポーネントにレンダリングしたいと思います。私はいくつかの変換ツール（HTMLからJSXへ）について人々が話しているソリューションをいくつか見ていましたが、コンポーネント内のすべてを処理したいので、実装する際にHTMLレスポンスが得られ、レンダリングする必要があります。

Answer 1

あなたはこのためdangerouslySetInnerHTMLを使用することができます。

function createMarkup() { return {__html: 'First · Second'}; }; 
<div dangerouslySetInnerHTML={createMarkup()} /> 

しかし、メソッドの名前が示すように：あなたはそこに行って、それが持っているセキュリティへの影響されているものの非常に確認する必要があります。

Answer 2

これは困難ではありません。 {variable name} JSXでこれを行うことができ、ES6との統合ではclassNameの代わりにclassを使用することもできます。

var Hello = React.createClass({ 
 
    
 
    render: function() { 
 
    var htmlDiv = <div>How are you</div> 
 
    return <div>Hello {this.props.name} 
 
    \t \t {htmlDiv} 
 
    </div>; 
 
    } 
 
}); 
 

 
ReactDOM.render(
 
    <Hello name="World" />, 
 
    document.getElementById('container') 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script> 
 

 

 
<div id="container"> 
 
    <!-- This element's contents will be replaced with your component. --> 
 
</div>