危険なsetInnerHTMLとiframeに反応する

Question

私は、Wordpressのブログ記事をレンダリングするcomponenetを持っています。ブログ投稿には通常のテキスト/ HTMLマークアップが含まれていますが、時には要素を含むYouTubeの埋め込みも含まれています。 dangerallySetInnerHTMLはこのiframeを取り除きます。どのようにこのタイプのコンテンツをサポートできますか？

Answer 1

React要素を作成して更新することはできませんが、作成時に通常のJavascriptを使用して必要なhtmlを挿入できます。これはかなり安全ではないことに注意してください！

const StaticHtml = React.createClass({ 
 
    inject(element) { 
 
    element.innerHTML = this.props.html; 
 
    }, 
 
    
 
    shouldComponentUpdate() { 
 
    return false; //prevent React updates as it will get confused by the DOM it didn't put there! 
 
    }, 
 
    
 
    render() { 
 
    return <div ref={ this.inject } /> 
 
    } 
 
}); 
 

 
const myHtml = `<iframe width="560" height="315" src="https://www.youtube.com/embed/jUjh4DE8FZA" frameborder="0" allowfullscreen></iframe>`; 
 
ReactDOM.render(<StaticHtml html={ myHtml } />, document.getElementById("app"));

<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='app'></div>

あなたが破壊し、要素を再作成するために「HTML」ために混乱します反応するので、確認してくださいPROPの値を更新することはできませんいつでもHTMLの変更（「キー"小道具はこれのために良いです）。