[解決済み] Reactで子コンポーネントを動的に追加する

質問

私の目標は、ページ/親コンポーネントにコンポーネントを動的に追加することです。

私はこのようないくつかの基本的な例のテンプレートから始めました。

main.js。

var App = require('./App.js');
var SampleComponent = require('./SampleComponent.js');
ReactDOM.render(<App/>, document.body);
ReactDOM.render(<SampleComponent name="SomeName"/>, document.getElementById('myId'));

App.jsです。

var App = React.createClass({
    render: function() {
        return (
            <div>
                <h1>App main component! </h1>
                <div id="myId">myId div</div>
            </div>

        );
    }

});

SampleComponent.jsです。

var SampleComponent = React.createClass({
    render: function() {
        return (
            <div>
                <h1>Sample Component! </h1>
            </div>
        );
    }
});

ここで SampleComponent にマウントされています。 <div id="myId"></div> ノードにあらかじめ書かれている App.js テンプレートにあらかじめ記述されている。しかし、App コンポーネントに不特定多数のコンポーネントを追加する必要がある場合はどうすればいいのだろうか。明らかに、私は必要なすべての divs をそこに置くことはできません。

いくつかのチュートリアルを読んだ後、私はまだコンポーネントが作成され、親コンポーネントに動的に追加される方法について理解していない。それを行う方法は何ですか?

どのように解決するのですか?

以下のように、コンポーネントを子として渡す必要があります。

var App = require('./App.js');
var SampleComponent = require('./SampleComponent.js');
ReactDOM.render(
    <App>
        <SampleComponent name="SomeName"/> 
    <App>, 
    document.body
);

そして、コンポーネントのボディにそれらを追加します。

var App = React.createClass({
    render: function() {
        return (
            <div>
                <h1>App main component! </h1>
                {
                    this.props.children
                }
            </div>
        );
    }
});

HTMLコードを手動で操作する必要はなく、Reactが代わりにやってくれます。子コンポーネントを追加したい場合は、propsやstateを変更すればよいだけです。例えば

var App = React.createClass({

    getInitialState: function(){
        return [
            {id:1,name:"Some Name"}
        ]
    },

    addChild: function() {
        // State change will cause component re-render
        this.setState(this.state.concat([
            {id:2,name:"Another Name"}
        ]))
    }

    render: function() {
        return (
            <div>
                <h1>App main component! </h1>
                <button onClick={this.addChild}>Add component</button>
                {
                    this.state.map((item) => (
                        <SampleComponent key={item.id} name={item.name}/>
                    ))
                }
            </div>
        );
    }

});