在React中动态添加子组件

Question

我的目标是在页面/父组件上动态添加组件。

我从这样的一些基本示例模板开始：

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组件中添加不确定数量的组件怎么办？显然，我不能将所有必需的
div都 坐在那里。

在阅读了一些教程之后，我仍然不了解如何动态创建组件并将其动态添加到父组件。有什么办法呢？

Answer 1

您需要以子代形式传递组件，如下所示：

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会为您完成。如果要添加一些子组件，则只需更改道具或声明其依赖。例如：

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>
        );
    }

});