如何从“react-countdown-now”库调用开始和暂停函数？

Question

我是反应新手，我一直在尝试使用库 countdown-now 创建一个国际象棋倒计时器。我目前有一个显示时间的时钟组件。我不知道如何调用启动和停止函数。

这是该库的链接： https: //www.npmjs.com/package/react-countdown-now#api-reference

我的时钟组件代码：

function Clock({ time }) {
  return (
    <div style={clockStyle}>
      <Countdown
        date={Date.now() + (time * 60000)}
        intervalDelay={3}
        zeroPadTime={2}
        autoStart={false}
        daysInHours
      />
    </div>
  );
}

在父组件中：

<Clock time={state.time} />

Answer 1

有一种可能的方法可以做到这一点，但我花了很长时间才弄清楚。我和你一样正在开发一个倒计时器，但我被 useRef 的事情困住了。所以这里是：

function FullClock(props) {
  const { total } = props;

  const clockRef = useRef();
  const handleStart = () => clockRef.current.start();
  const handlePause = () => clockRef.current.pause();

  return (
    <div>

      <Countdown
        date={Date.now() + total}
        renderer={renderer}
        ref={clockRef}
      />

      <Button
        variant='contained'
        color='primary'
        type='submit'
        onClick={handleStart}
      >
        RESUME
      </Button>
      <Button
        variant="contained"
        color='primary'
        type='submit'
        onClick={handlePause}
      >
        PAUSE
      </Button>
    </div >
  );
}