Question

有人能告诉我如何在循环功能中完成这项工作吗？如何将循环函数绑定到构造函数？

class Cookcoo extends React.Component{
    constructor(props){
        super(props);
        this.state={
            test:false
        }
        this.onPlay=this.onPlay.bind(this)
    }
    onPlay(){
            (function loop() {
            let randomTime = Math.round(Math.random() * 3000) + 500;
            setTimeout(()=> {
                this.setState({test:true}); 
                setTimeout(()=>this.setState({test:false}),500)
                loop();
            }, randomTime);

        }());
    }

Answer 1

您可以bind自执行功能，然后使用.call()调用内部函数

onPlay() {
    (function loop() {
      let randomTime = Math.round(Math.random() * 3000) + 500;
      setTimeout(() => {
        console.log(this);
        this.setState({ test: true });
        setTimeout(() => this.setState({ test: false }, console.log(this.state.test)), 500)
        loop.call(this);
      }, randomTime);

    }.bind(this)());
  }

Answer 2

一个简单的解决方案是使用额外的变量来存储this（类上下文）的引用，并在循环函数中使用该变量。

像这样：

onPlay(){

    let that = this;

    (function loop() {
        let randomTime = Math.round(Math.random() * 3000) + 500;
        setTimeout(()=> {
            that.setState({test:true}); 
            setTimeout(()=>that.setState({test:false}),500)
            loop();
        }, randomTime);
    }());
}

如何在React中的函数内部的递归函数中绑定它？

2 个答案: