在 React 中创建一个全局变量以使用 clearInterval

Question

我正在学习 React，我偶然发现了一个问题，我已经几天找不到答案了。我正在尝试制作一个类似于倒计时应用程序的应用程序。在此应用程序中，我可以进行倒计时运行，但我无法访问计时器功能以使用 clearInterval，因为计时器在其功能范围内受到限制。无论如何我可以使用 clearInterval ontimer 这样我就可以暂停开始功能吗？在 javascript vanilla 中，我可以将计时器声明为全局变量并可以在任何地方访问它，但在反应中我不知道该怎么做。非常感谢你的帮助

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 本身中定义 begin 函数，并将计时器声明为 class 属性 like

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

在 React 中创建一个全局变量以使用 clearInterval

making a global variable in React to use clearInterval

reactjs

global-variables

countdown

clearinterval