javascript - 如何在完成后重置计时器组件

Question

我正在尝试使用react-countdown-now包构建一个计时器组件:https://www.npmjs.com/package/react-countdown-now#key .

我在重置计时器时遇到问题，以便它转到时间表上的下一个时间。

我一直在尝试在 props 中使用 key 属性，它会在数组中多次传递它以等待(它在文档中)。实际上，我会从服务器端方法获取时间表的这些值。

目前我有

组件:

<Countdown
     date={Date.now() + 5000}
     key = {timeDelays}
     intervalDelay={0}
     precision={3}
     renderer={timerRenderer}
/>

支持功能和值:

//These time values are most probably going to be in JSON format, 
//and probably will contain EPOCH times for scheduled events

const timeDelays = [2000,4000,3000,15789,2345794];

// Random component
const Completionist = () => <span>You are good to go!</span>;

// Renderer callback with condition
const timerRenderer = ({ hours, minutes, seconds, completed }) => {
     // if (completed) {
        //     Render a completed state
        //     return <Completionist />;
     // } else {
     //     // Render a countdown
            return <span>{hours}:{minutes}:{seconds}</span>;
     //}
};

我希望它从列表中的倒计时开始，然后在完成后移至列表中的下一个计划值。

Answer 1

这与之前的答案完全不同，后者使用了基于类的组件。

首先，我们需要将 React 和 React hooks 导入到我们的组件文件中。

import React, { useState } from 'react';

接下来，我们将声明一个 React 函数组件并使用 React hooks 来维护状态。

function MyCountdownTimer({ times }) {
    // a hook for the current time index
    const [currentTimeIndex, setCurrentTimeIndex] = useState(0);
    // a hook for the current time
    const [currentTime, setCurrentTime] = useState(null);
    // return a render
    return (
        <Countdown
            date={currentTime}
            key={currentTimeIndex}
            onComplete={() => {
                // dont's move to next time if just done with last time
                if(times.length - 1 <= times.indexOf(currentTime)) return;
                // move to next time index
                setCurrentTimeIndex(currentTimeIndex + 1);
                // reset current time
                setCurrentTime(new Date(times[currentTimeIndex + 1]));
            }}
            renderer={({ hours, minutes, seconds, completed }) => {
                // render completed
                if (completed) return <span>You are good to go!</span>;
                // render current countdown time
                return <span>{hours}:{minutes}:{seconds}</span>;

            }}
        />
    );
}

这个的实现看起来像这样。

let times = [...] // an array of times

<MyCountdownTimer times={times} />

React Hooks 仍然有点新，因此为了更好地了解 React Hooks，您可以点击此链接 https://reactjs.org/docs/hooks-intro.html .

注意

1. 您需要一种方法来判断您当前所处的时间，因此在您的组件中您将有两件事。时间列表 (times) 作为数组，应按照上面代码中的建议作为 prop 传递，当前时间的索引 (currentTimeIndex) 作为整数以及作为 Date 对象的当前时间 (currentTime)。

2. 您需要使用 onComplete 属性定义回调方法来监听计时器何时达到零，当倒计时器完成时，我们不会更新组件的状态。

3. 倒数组件上的一个关键属性，这意味着每次您想要重置倒数计时器时都会更改，并且由于我们正在增加索引以转到下一次我们将简单地使用索引当前时间。

4. 我减少了渲染器的代码，以便您可以在同一函数中渲染所需的内容，除非您要在其中添加更多代码。

5. 这是使用 hooks 的函数组件维持状态。

6. 文档中的日期可以是日期对象。