npm 包 react-time-hoc 使用教程

React-time-hoc 是一个 React 高阶组件，用来设置当前时间或者倒计时组件。该 npm 包的安装和使用非常简单，下面我们就来详细介绍一下。

1. 安装

使用以下命令，在你的项目中安装 react-time-hoc：

npm install react-time-hoc --save

或者使用 yarn：

yarn add react-time-hoc

2. 使用

引入 react-time-hoc：

import withTimer from 'react-time-hoc';

然后，设定一个计时器组件：

const Timer = ({ currentTime }) => {
  return <div>Current time: {currentTime}</div>;
};

最后，使用高阶组件包裹：

const WrappedTimer = withTimer(Timer);

这样你就完成了一个计时器组件的包装，现在这个组件会显示当前时间。

3. 配置项

React-time-hoc 有两种模式：倒计时模式和实时时间模式。具备以下配置项：

withTimer(Component, {
    countDownTo: '', // 时间字符串，格式：YYY-MM-DD HH:mm:ss，倒计时到的时间
    interval: 1000, // 时间间隔，单位：毫秒
    refreshInterval: 0, // 实时时间组件的刷新间隔，单位：毫秒
    autoStart: true, // 是否自动开始计时
    showRefreshIntervalWarning: true // 是否在更新时间时打印警告信息
});

解释一下这些配置项：

• Component：你要包装的组件。
• countDownTo：倒计时到这个时间。格式可以是一个 Date 对象、一个 ISO 字符串或者一个 UNIX 时间戳。
• interval：倒计时模式下计时器的时间间隔。
• refreshInterval：实时时间模式下组件刷新的时间间隔。
• autoStart：是否自动开始计时。
• showRefreshIntervalWarning：是否在更新时间时打印警告信息。

4. 示例

下面是一个基本的实时时间组件：

import React from 'react';
import withTimer from 'react-time-hoc';

const RealTimeDisplay = ({ currentTime }) => (
  <h2>{`Current Time ${currentTime}`}</h2>
);

const RealTimeDisplayWithTimer = withTimer(RealTimeDisplay, {
  refreshInterval: 1000,
});

export default RealTimeDisplayWithTimer;

这个组件会每秒钟更新一下当前的时间。

然后是一个简单的倒计时组件：

import React from 'react';
import moment from 'moment';
import withTimer from 'react-time-hoc';

const Countdown = ({ timeLeft }) => (
  <h2>{timeLeft ? `倒计时 ${timeLeft}` : '倒计时已结束'}</h2>
);

const CountdownWithTimer = withTimer(Countdown, {
  countDownTo: moment().add(30, 'seconds'),
});

export default CountdownWithTimer;

这个组件会从现在的时间开始倒计时 30 秒，然后倒计时结束。

5. 总结

React-time-hoc 是一个非常简单可用的 React 高阶组件，用于设置倒计时或者实时时间组件。它有多种配置选项，非常灵活，同时也可以轻松地在你的应用中安装和使用。如果你需要进行倒计时或者显示当前时间，这个 npm 包绝对值得一试！

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/600673e2fb81d47349e53daa