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')
);
具体可以看下文档