javascript - 以编程方式在 React 中添加更多组件

Question

我想将模板作为 Prop 或子项传递，每次单击“添加”时我都想再添加一项。

这是我到目前为止的进展:

App.js

<List template={
  (<Item>
      <span>Test</span>
   </Item>)
} />

List.js

...
add = () => {
    const list = this.state.list;
    const i = list.length + 1;
    const newItem = cloneElement(this.props.template, { key: i });
    this.setState({ list: this.state.list.concat([newItem]) });
}

...

render() {
    return (
      <div className="list">
        {this.state.list}
        <button onClick={this.add}>Add</button>
      </div>
    );
  }

但是虽然添加了一个新项，但它没有子项，所以“Item”存在，但“span”不存在。所以列表总是空的。

有人知道怎么做吗？

关键是 List 不能知道传递给它的是什么。无论您传递什么，它都应该添加。

Answer 1

您的 List 组件只呈现子组件。我基本上做类似下面的事情

 class List extends Component{
     render(){
         return(
             <div>
                 {this.props.children}
             </div>
         )
    }
}

你可以调用 List 并传递项目或类似下面的任何东西

您的按钮位于您调用 List 并将 onClick={this.add} 传递给该按钮的组件中。像下面这样的东西

 this.state ={
      items: []
 }
 add = () => {
      const item =  <Item>
           <span>Test</span>
         </Item>
      this.setState(prevState => ({
           items: [...prevState.items, item]
      }));
  }
 <div>
      <List>
          {items}
      </List>
      <button onClick={this.add} />
   </div>