如何从“react-countdown-now”库中调用启动和暂停函数？答案

【问题标题】：How to call start and pause functions from the 'react-countdown-now' library?如何从“react-countdown-now”库中调用启动和暂停函数？
【发布时间】：2020-03-26 13:53:30
【问题描述】：

我是新手，我一直在尝试使用库 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} />

【问题讨论】：

标签： reactjs countdown

【解决方案1】：

来自文档：

countdown 组件通过 getApi() 函数公开了一个简单的 API，可以通过组件 ref 访问该 API。如果需要，它也是传递给渲染器的渲染道具的一部分（api）。

一旦我们可以访问 API：

开始() 当 autoStart 设置为 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" />
            </>
        );
    }
}

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

【讨论】：

那么，函数组件是没有办法做到的，对吧？

【解决方案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 >
  );
}

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

【讨论】：

感谢您的回答我遇到了一些问题:)