react 如何实现setInterval每过一秒在html中添加一个div ?

Question

react如何实现setInterval每过一秒在html中添加一个div?
现在有一个需求是要每过几秒在界面添加一个盒子之前没写过react函数应该写在componentDidMount()里面吧求大佬给个思路~
现在实现了不知道怎么停下来我是真滴菜

Answer 1

classAppextendsComponent{constructor(props){super(props);this.state={arr:[],index:0}this.handle=null;this.stopClickHandle=this.stopClickHandle.bind(this);}stopClickHandle(){if(this.handle){clearInterval(this.handle);this.handle=null;}}componentDidMount(){constme=this;this.handle=setInterval(function(){me.setState(function(preState){letarr=[preState.index++,...preState.arr];return{arr};});if(me.state.index==me.props.max){me.stopClickHandle();}},1000);}render(){letarr=this.state.arr;arr=arr.map(function(item){return({item})});return({arr})}}ReactDOM.render(,document.body);

Answer 2

importReactfrom"react";classClockextendsReact.Component{constructor(props){super(props);this.state={arr:["div"]};}componentDidMount(){this.timeID=setInterval(()=>this.tick(),1000)}componentWillUnmount(){clearInterval(this.timeID)}tick(){//5个停止计时器if(this.state.arr.length===5){clearInterval(this.timeID);return;}this.setState((prevState,props)=>({arr:[...prevState.arr,props.add]}))}render(){return(this.state.arr.map((item,idx)=>({item})))}}ReactDOM.render(,document.getElementById('root'));具体可以看下文档