react如何实现动态增加一个组件

Question

页面内包含一个组件和一个增加按钮，如何实现点击增加按按钮复制这个组件呢。使用React.cloneElement()这个API吗。
像图中的点击蓝色按钮，新增一个黑色组件

Answer 1

假设这个组件为<NewConpmonent />

state = {componnetArray: [1]};
addComponent = () => {
    let arr = [...this.state.componnetArray];
    arr.push(1);
    this.setState({
        componnetArray: arr
    })
}

//存放组件的地方写法如下
<div>
    //根据this.state.componentArray数组的长度来新增组件
    {this.state.componentArray.map((item, index) => <NewConpmonent key={index} />))}
    <Button onClick={addComponent}></Button>
</div>

Answer 2

并不需要。

const BlackComponent = () => <div>我是黑色组件</div>

export default class extends React.Component{
    constructor(props) {
        super(props);
        this.state = {comps : []}
    }
    
    render() {
        const {comps } = this.state;
        return (
            <div>
                {comps.map(comp => {
                    return <BlackComponent key={comp} />
                })}
            <p>---------------</p>
            <button onClick={() => this.setState({comps: comps.concat([Date.now()])})}>加组件</button>
            </div>
        );
    }
}

在线示例

Answer 3

用数组循环渲染组件，添加直接给数组添加一个值，重新渲染即可

Answer 4

可以使用rc-notification