子要素をReact要素に追加する

Question

子要素をReactコンポーネントに追加するにはどうすればよいですか。 this.props.childrenは読み取り専用のようですので、直接変更することはできません。

はのは、私が

var myComponent = <MyComponent someProp="foo"><h1>heading</h1><h2>another heading</h2></MyComponent> 

を持っていると言うと、私はそれに3番目の子として<p>some text</p>追加したいと思います。

私はこれを達成したいと思います：結果は

<MyComponent someProp="foo"><h1>heading</h1><h2>another heading</h2><p>some text</p></MyComponent> 

なるよう

var newChild = <p>some text</p> 
myComponent.props.children.add(newChild) 

を（明らかに、追加機能は存在しませんが、質問が代わりに何をするかです）

Answer 1

すべての子コンポーネントがある状態を保つ

代わり小道具の状態へとレンダリングに

render() { 
return ({<div>this.state.children.map((child) => {return <child as jsx>;}}</div>); 

Answer 2

を書き込むchildrenプロップ（docs参照）JSX要素のタグの間に挿入されたコンテンツを表し、そして直接変更されることになっていません。実際には、this.propsのコンテンツの変更は通常考えられません。あなたの特定の問題に対処するために

、あなたはこのようなもののように、子どもたちがコンポーネントに追加されているかを定義したいように見える：

// parent component's render method 
render() { 
    const elements = ...; //build up an array of elements 
    return (<MyComponent someProp="foo"> 
    <h1>heading</h1> 
    <h2>another heading</h2> 
    {elements} 
    </MyComponent>) 
} 

タイプMyComponentのルート要素は、これらを使用する方法を知られてしまいます子どもたちは適切なレンダリングのためにthis.props.childrenで利用可能になる。このコンポーネントがテキストの挿入を積極的にトリガする必要がある場合は、MyComponentの小文字としてテキスト変更コールバックを含めるか、コンポーネント状態を使用することができます（したがって、その段落の子をまったく使用しないこと）。