ajax成功時にreactjsコンポーネントをマウントする

Question

jqueryを使用して反応コンポーネントをブートストラップモーダルボディにマウントしようとしていますが、Ajaxリクエストが成功した後にモーダルを開くと、反応コンポーネントがロードされないようです。これはこれまで私が持っているものです：

私はassignModal関数を呼び出しています。私は親の反応コンポーネントの中にいます。

assignModal: function(){ 
$('.assign-modal-body').html(<Cortex.VulnerabilityList.AssignModal parent={this}/>); 
$("#vuln-assign-modal").modal('show');} 

そして、ここに私の経験からコンポーネント

Cortex.VulnerabilityList.AssignModal = React.createClass({ 
componentDidMount: function() { 
console.log("Component mounted") 
}, 

render: function() { 
    return (
    <h1>Hello</h1> 
) 
} 
}); 

Answer 1

を反応させるのである、あなたは、両方のjQueryを使用しようとDOMを操作するように反応する場合には問題があるとしています。それがすべてのオプションであれば、jQueryを取り除き、Reactの宣言型プログラミングパラダイムを完全に受け入れます。

ただし、使用したいjQueryウィジェットがあります。その場合は、jQueryがReactツリー内のDOMに書き込むことがないようにアプリケーションを設計してください。

だから、いくつかのオプション：

1. 使用jQueryと反応するが、別途 - あなたのいくつかのルート<div>から降順アプリを反応させ、兄弟<div>であなたのモーダルを持ってもらいます。次に、jQueryと通常のHTMLを使用して、Reactを使わずにモーダルをレンダリングします。
2. jQueryの使用を中止する - リアクションを使用してモーダルを管理します。したがって、assignModalに応答する代わりに、DOM要素のinnerHTMLをjQueryで設定するだけで、いくつかのグローバル状態をshowModal = trueに設定し、モーダルのレンダリングメソッドif (!showModal) return nullまたはそのようなものを設定するだけです。最近ではI wrote a postです。