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

Question

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

这是给图书馆的 link：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

来自文档：

The countdown component exposes a simple API through the getApi() function that can be accessed via component ref. It is also part (api) of the render props passed into renderer if needed.

一旦我们可以访问 API：

start() Starts the countdown in case it is paused or needed when autoStart is set to false.

所以首先，我们需要访问 API（通过 ref）

export default class Clock extends React.Component {
    render() {
        const { refCallback, time } = this.props;

        return (
            <Countdown
                // When the component mounts, this will 
                // call `refCallback` in the parent component,
                // passing a reference to this `Countdown` component
                ref={refCallback} 
                date={Date.now() + (time * 60000)}
                intervalDelay={3}
                zeroPadTime={2}
                autoStart={false}
                daysInHours
            />
        );
    }
}

现在我们可以按照文档中的描述访问 API。

class App extends React.Component {
    clockRef = null;

    constructor(props) {
        super(props);
        this.setClockRef = this.setClockRef.bind(this);
        this.start = this.start.bind(this);
        this.pause = this.pause.bind(this);
    }

    start() {
        this.clockRef.start();
    }

    pause() {
        this.clockRef.pause();
    }

    setClockRef(ref) {
        // When the `Clock` (and subsequently `Countdown` mounts
        // this will give us access to the API
        this.clockRef = ref;
    }

    render() {
        return (
            <>
                <button onClick={this.start}>Start Clock</button>
                <button onClick={this.pause}>Pause Clock</button>
                <Clock refCallback={this.setClockRef} time="100" />
            </>
        );
    }
}

点击开始按钮开始倒计时，点击暂停按钮暂停倒计时。

Answer 2

有一种可行的方法可以做到这一点，但我花了很长时间才弄明白。我和你一样在做一个倒数计时器，但我被 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 >
  );
}

如果你需要我详细说明，请随时问我，我爸爸催促我上楼睡觉，我不能再待下去了。

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

How to call start and pause functions from the 'react-countdown-now' library?

countdown

reactjs