Question

我正在尝试使用react-countdown-now软件包https://www.npmjs.com/package/react-countdown-now#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钩子导入到我们的组件文件中。

import React, { useState } from 'react';

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

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钩子还是有点新，因此为了更好地了解React Hooks，您可以点击此链接https://reactjs.org/docs/hooks-intro.html。

注意

您需要一种方法来告诉您当前的工作时间，因此在组件中您将有两件事。时间列表（times）的数组，应按照上面代码中的建议作为prop传递，当前时间（currentTimeIndex）的索引为整数，当前时间（{ {1}}）作为日期对象。
您将需要使用currentTime属性定义计时器方法来监听计时器为零时的情况，当倒数计时器完成时，我们不会更新组件的状态。
Countdown组件的一个关键属性，它意味着每次您要重置倒数计时器时都会更改，并且由于我们要增加索引以转到下一次，我们将仅使用索引当前时间。
我减少了渲染器的代码，因此您可以在同一函数中渲染所需的内容，除非您要在其中添加更多的代码。
这正在使用带有hooks的功能组件来维持状态。
根据文档提供的日期可以是日期对象。

希望这有助于回答您的问题。

Answer 2

我想我的翻译组件看起来像这样

const WebPage = (props) => {
        const timerState = {
                times:[Date.now()+5000,Date.now()+12000,Date.now()+17000,Date.now()+22000],
                currentTimeIndex: 0,
                currentTime: Date.now(),
        } ;
        const timerRenderer = ({ hours, minutes, seconds, completed }) => {
                if (completed) return <span> No more Scheduled time</span>;
                return <span>{hours}:{minutes}:{seconds}</span>;
        };
        const completeTime = () => {
                if (timerState.times.length - 1 <= times.indexOf(timerState.currentTime)) return;
                // move to next time
                timerState.currentTimeIndex++;
                timerState.currentTime = new Date(timerState.times[timerState.currentTimeIndex+1])
        };
        return (
                <Countdown
                     date={timerState.currentTime}
                     key = {timerState.currentTimeIndex}
                     onComplete={completeTime}
                     intervalDelay={0}
                     precision={3}
                     renderer={timerRenderer}
                />
        ) 
}

它不能完全正常工作，因为默认情况下它变为“不再安排时间”，并且如果我摆脱了if（completed），它将停留在0：0：0。

Answer 3

只需要改变键属性key={new values or updated value}的值，自动重新设置定时器。

<块引用>

键这是 React 的内部组件 props 之一，用于标识组件。但是，我们可以利用这种行为，例如通过传入新的字符串或数字来重新开始倒计时。enter link description here

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

3 个答案: