在使用ClearInterval的React中使全局变量

Question

我正在学习反应，我偶然发现了一个问题，我已经找到了几天的答案。我正在尝试制作一个类似于Countdown应用程序的应用程序。在此应用程序中，我可以进行倒计时运行，但是由于计时器在其功能范围中受到限制，因此无法访问计时器函数以使用ClearInterval。无论如何，我是否可以使用Clear Interval Ontimer，以便可以暂停开始函数？在JavaScript香草中，我可以将计时器声明为全局变量并在任何地方访问它，但是在React中，我不知道该怎么做。我将非常感谢您的帮助

import React from 'react';
import ReactDOM from 'react-dom';
class Countdown extends React.Component{
    constructor(){
        super();
        this.state ={count:10};
    }
    render(){
        return(
            <div>
                <button onClick={()=>begin(this.state.count)}>start</button>
                <button>pause</button>
                <button>continue</button>
            </div>
        );
    }
};
const begin=(c)=>{
    let count = c;
    const timer = setInterval(countdown,1000);
    function countdown(){
        count=count-1
        if (count<0){
            clearInterval(timer);
            return; 
        }
        console.log(count)
    }
}
ReactDOM.render(<Countdown/>, document.getElementById('app'));

Answer 1

您宁愿在组件类本身中定义开始函数，并将计时器声明为类属性，例如

class Countdown extends React.Component{
    constructor(){
        super();
        this.state ={count:10};
        this.timer = null;
    }
    countdown = (count) => {
        count= count-1
        if (count<0){
            clearInterval(this.timer);
            return; 
        }
    }
    begin=() => {
      const count = this.state.count
      this.timer = setInterval(() => countdown(count),1000);
    }
    render(){
        return(
            <div>
                <button onClick={this.begin}>start</button>
                <button>pause</button>
                <button>continue</button>
            </div>
        );
    }
};