reactjs – 在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组件呢？显然我不能让所有必需的div坐在那里。

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

你需要传递你的组件作为一个孩子，像这样…

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

});