首頁(yè) 猿問(wèn) react...

react 如何實(shí)現(xiàn)setInterval每過(guò)一秒在html中添加一個(gè)div ?

JavaScript

眼眸繁星 2019-05-22 20:54:34

react如何實(shí)現(xiàn)setInterval每過(guò)一秒在html中添加一個(gè)div?現(xiàn)在有一個(gè)需求是要每過(guò)幾秒在界面添加一個(gè)盒子之前沒(méi)寫過(guò)react函數(shù)應(yīng)該寫在componentDidMount()里面吧求大佬給個(gè)思路~現(xiàn)在實(shí)現(xiàn)了不知道怎么停下來(lái)我是真滴菜

查看完整描述

2 回答

縹緲止盈

TA貢獻(xiàn)2041條經(jīng)驗(yàn) 獲得超4個(gè)贊

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

反對(duì) 回復(fù) 2019-05-22

互換的青春

TA貢獻(xiàn)1797條經(jīng)驗(yàn) 獲得超6個(gè)贊

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個(gè)停止計(jì)時(shí)器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'));具體可以看下文檔