ReactコンポーネントをDOMに動的に挿入するにはどうすればいいですか？

Question

alert()のjavascriptの組み込み関数を、同じタスクを処理するリアクションコンポーネントと置き換えたいと思います。つまり、ユーザーにすばやく拒否可能なメッセージを表示します。

これを実現するには、コンポーネントを作成してマークアップに配置します。例えば

次に、openの状態をRedexなどで制御して表示させるようにしてください。

しかし、私が何をしようをあろうこと、それが私のマークアップで宣言ないにできるようにし、代わりには機能経由でDOMにそれを注入します。

のような何か...

myCoolFunction() { 
    const alert = (
     <MyAlert 
      open={true} 
      msg="Hello World" 
     /> 
    ) 
    DOM.findNode('someID').insert(alert); <-- fake API obviously 
} 

は、それが動的にそのようなコンポーネントを追加することは可能ですか？

Answer 1

これは私が仕事で行う汚い方法です（それは正しいとは言えませんでした...） http://codepen.io/matthsiung/pen/JKOpVW

私は確かにそれを行うためのより適切な方法がありますが、それはそれ自身の後にきれいになるので、それは私のために働く。ここ

キーポイントである：

ダイアログトリガー

//Your trigger function will render the dialog component to a newly created dummy div, 
// while also passing it into the component as a prop 

function showDialog() { 
    var div = document.createElement('div'); 
    ReactDOM.render(
    <Dialog container={div}/>, 
    document.body.appendChild(div) 
); 
} 

ダイアログコンポーネント：

//When your dialog component closes it unmounts itself 
close(){ 
    ReactDOM.unmountComponentAtNode(this.props.container); 
}, 

//Before unmount it cleans up after itself by removing the dummy div 
componentWillUnmount() { 
document.body.removeChild(this.props.container); 
}, 

Answer 2

react-portalがお手伝いします。ドキュメントから

：

は新リアクトコンポーネントにその子を輸送し、document.bodyに追加し（新しい独立したツリーを反応させるの作成）

私はのために（たくさん使いますダイアログ/モーダルおよびメニューポップアップ）。非常に便利で軽量です。

Answer 3

空のノードとしてレンダリングされている場合、リアクションレンダリングされたツリーの中にDOM操作のカスタムアイテムを挿入することは可能です。

<div id="you-know-id /> 

あなたはその後、idで、このノードを見つけ、そして何かをそのinnerHTMLを割り当てることができます：あなたはどこかでレンダリングするのに反応していると仮定。 idの代わりにrefsを使用していると、もっと反応する方法があります。

通常、この物はcomponentDidMount（あなたが挿入する場所）とcomponentWillUnmount（どこからでも削除してから退会する）の方法でラップされています。

汚れたトリックを行うと、おそらくメモリリークを避けたいからです。それで、それは方法です。

ところで、私はそれがあなたが今説明した問題に近づく正しい方法だとは思わない。

{ this.props.shouldShowAlert && <MyAlertDialog open={ true } /> } 

し、それが閉じていたときに、実際はそれが開かれています、およびアンマウントマウントされますで：あなたの代わりに何ができるか、このようなものです。

それでも、ステートまたはプロップメンバの注入を制御する方が安全です。あなたは実際にあなたが直接のDOM操作を行うときにあなたが何をしているのかを知る必要があります。さあ、いくつかのjQueryプラグインをラップする:)。それから、別の方法がないので、あなたは大丈夫です:)。