Блог

 <Countdown
    date={Date.now()   (n.duration)}
    ref={this.refCallback}
    autoStart={false}

    renderer={({ hours, minutes, seconds, completed }) => {
        if (completed) {
            // Render a completed state
            return <div>Times up</div>;
        } else {
            // Render a countdown
            return <h1 className="m-0 font-weight-bold">{hours}:{minutes}:{seconds}</h1>;
        }
    }}
/>
  

Вот документация
https://www.npmjs.com/package/react-countdown

Спасибо.

Вы можете проверить документ api компонента обратного отсчета библиотеки. Он предоставляет метод start здесь. Вы можете вызвать this.refCallback.start() некоторые, с чего начать. Пример:

 const Component =(props) => {
    const ref= useRef();

    const handleStart = (e) => {
        ref.current?.start();
    }

    const handlePause = (e) => {
        ref.current?.pause();
    }

    return <>
        <button onClick={handleStart}> Start </button>
        <button onClick={handlePause}> Pause </button>
        <Countdown
            date={Date.now()   (20000)}
            ref={ref}
            autoStart={false}

            renderer={({ hours, minutes, seconds, completed }) => {
                if (completed) {
                    // Render a completed state
                    return <div>Times up</div>;
                } else {
                    // Render a countdown
                    return <h1 className="m-0 font-weight-bold">{hours}:{minutes}:{seconds}</h1>;
                }
            }}
        />
        </>
}