在React中动态添加子组件 [英] Dynamically add child components in React

问题描述

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

My goal is to add components dynamically on a page/parent component.

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

I started with some basic example template like this:

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:

SampleComponent.js:

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

此处SampleComponent已安装到<div id="myId"></div>节点，该节点已预先编写在App.js模板中.但是，如果我需要向App组件中添加无限数量的组件，该怎么办?显然，我不能把所有必需的 divs 都坐在那里.

Here SampleComponent is mounted to <div id="myId"></div> node, which is pre-written in App.js template. But what if I need to add indefinite number of components to App component? Obviously I cannot have all the required divs sitting there.

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

After reading some tutorials I still have no understanding of how components are created and added to parent component dynamically. What is a way of doing it?

推荐答案

您需要以子元素形式传递组件，如下所示:

You need to pass your components as children, like this:

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

然后将它们附加到组件主体中:

And then append them in the component's body:

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

您不需要手动操作HTML代码，React会为您完成.如果要添加一些子组件，则只需更改道具或声明其依赖.例如:

You don't need to manually manipulate HTML code, React will do that for you. If you want to add some child components, you just need to change props or state it depends. For example:

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

});

这篇关于在React中动态添加子组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！