TA貢獻1788條經(jīng)驗 獲得超4個贊
class App extends Component{
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(){
const me=this;
this.handle=setInterval(function(){
me.setState(function(preState){
let arr=[preState.index++,...preState.arr];
return {arr};
});
if(me.state.index == me.props.max){
me.stopClickHandle();
}
},1000);
}
render(){
let arr=this.state.arr;
arr=arr.map(function(item){
return (<div>{item}</div>)
});
return(
<div>
{arr}
</div>
)
}
}
ReactDOM.render(<App max={5} />,document.body);
TA貢獻1880條經(jīng)驗 獲得超4個贊
import React from "react";
class Clock extends React.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)=> (
<div>
<h1>{item}</h1>
</div>
))
)
}
}
ReactDOM.render(
<Clock add={"div"}/>,
document.getElementById('root')
);
舉報