dangerouslySetInnerHTMLの中の反応成分を使用して反応する

Question

反応を使用することについて質問があります。タイトルからわかるように、 "dangerouslySetInnerHTML"プロパティの中でReactコンポーネント（React.createClassによって作成されたもの）を使用できるかどうかは疑問です。私が試したが、ちょうどこのように変換せずにコードを印刷しリアクトしている：私は

<ul> 
    <li> 
     <p>MySubComponent</p> 
    </li> 
</ul> 

を期待しますが、コードは、元の文字列とちょうど同じであり、手段はMySubComponentを変換していない反応することが

const MySubComponent = React.createClass({ 
    render() { 
     return (<p>MySubComponent</p>); 
    } 
}); 

... 

let myStringHTML; 
myStringHTML += "<ul>"; 
myStringHTML += " <li>"; 
myStringHTML += "  <MySubComponent />"; 
myStringHTML += " </li>"; 
myStringHTML += "</ul>"; 

const MyComponent = React.createClass({ 
    render() { 
     return (
      <div dangerouslySetInnerHTML={{__html:myStringHTML}}></div> 
     ); 
    } 
}); 

。

この問題を解決する方法はありますか？上の例は単純ですが、私の実際のコードはかなり複雑です。 ）

Answer 1

dangerouslySetInnerHTML有効なHTMLマークアップであるべき__htmlプロパティを持つJSオブジェクトが必要です。代わりに<MySubComponent />を提供し、そのコンポーネントのhtmlをレンダリングすることを期待しています。リアクションは<MySubComponent />を処理しません。名前としてのdangerouslySetInnerHTMLは避けるべきです。さらに、あなたがここで達成しようとしていることは、Reactだけで簡単に行うことができます。

const MySubComponent = React.createClass({ 
    render() { 
     return (<li><p>MySubComponent {this.props.index}</p></li>); 
    } 
}); 

const MyComponent = React.createClass({ 
    render() { 
     let subComponentList = []; 
     [1,2,3,4,5].forEach(function(i){ 
      subComponentList.push(<MySubComponent key={i} index={i} />); 
     }); 
     return (
      <ul>{subComponentList}</ul> 
     ); 
    } 
}); 

ReactDOM.render(<MyComponent />, mountNode); 

Answer 2

古い質問が、私は、私はこれに対する解決策を持っているかもしれないが、あなたのプロジェクトでそれを使用している場合、これは間違いなくあなたのredux流れを中断することに注意してくださいと思います将来wonderersため。

基本的には、dangerousSetInnerHTMLのテキストにはidが含まれている必要があります。
あなたの「危険なHTML」がDOMにマウントされた後に、componentDidMountライフサイクルフックのidにマウントすることです。

const myStringHTML = ` 
    <div id="someid"> 
    some text in my dangerous html 
    </div> 
`; 

const MySubComponent = React.createClass({ 
    render() { 
     return (<p>MySubComponent</p>); 
    } 
}); 

... 

let myStringHTML; 
myStringHTML += "<ul>"; 
myStringHTML += " <li>"; 
myStringHTML += "  <MySubComponent />"; 
myStringHTML += " </li>"; 
myStringHTML += "</ul>"; 

const MyComponent = React.createClass({ 

    componentDidMount() { 
     ReactDOM.render(<MyComponent />, document.querySelector('#someid')); 
    } 

    render() { 
     return (
      <div dangerouslySetInnerHTML={{__html: myStringHTML}}></div> 
     ); 
    } 
}); 

ただし、componentDidMountはコンポーネントのアップデートでは呼び出されません。詳細はlifecycle hook of reactを参照してください。

これは感じてもフェアウォークハッキーです。これには上記のように制限がありますが、には以外のオプションはありませんが、dangerousSetInnerHTMLを使用する時間があります。このような場合はこれがオプションです。他の時に@Rohit Singh Sengarが提案したものをreactでやろうとします。