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

Question

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

这是我到目前为止的地方：

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

但尽管添加了一个新项目，但它没有子项，因此“项目”存在，但“跨度”不存在。所以列表总是空的。

有人知道怎么做这样的事情吗？

关键是 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>

抱歉，如果我在手机上输入答案时出现语法或拼写错误

Answer 2

import React, { Component } from 'react';

class Item extends Component {

  render(){
    return (<p>This is an item
      {this.props.children}
    </p>)
  }

}

class List extends Component {

  constructor(props){
    super(props);
    this.state = {list: []};
  }

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

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

}

class App extends Component {
  render() {
    return (
      <List template={
        (<Item>
            <span>This is a Template</span>
         </Item>)
      } />
    );
  }
}

export default App;