javascript - 在点击按钮上设置多个组件 - React

Question

我已经开发了一个计时器，我们可以在上面输入名称和时间(以秒为单位)以启动计时器。

我现在想创建一个按钮，如果我点击它，它会显示另一个带有名称和时间(以秒为单位)的计时器。

我不知道我该怎么做...

这是带有输入的计时器... https://jsfiddle.net/q806zeps/37/

我想如果我能复制这个ReactDOM.render(<App/>, document.getElementById('timer'));但我认为这是不可能的？

谢谢

Answer 1

请看这个code ，希望它能解决您的问题。

class App extends React.Component {
constructor(props){
        super(props)
        this.state = {
         counter : 1
        }
     }
  //add timer code by oneshubh
  addTimer(){
            this.setState({counter: this.state.counter+1})
  }
  render(){ 
var timerDom = [];
  for(var i = 0;i<this.state.counter;i++){
    timerDom.push(<Wrapper />)
  }
  return (
        <div>
          {timerDom}
          <button onClick={()=>this.addTimer()} >add timer</button>
        </div>);
  }
}