介绍
在 Web 前端开发中，React 已经成为了最流行的 UI 框架之一。而 react-time-machine 是一个用于实现时间旅行功能的 npm 包，能够帮助开发者轻松地实现时间轴功能。
安装
要使用 react-time-machine 包，你首先需要在你的项目中安装它。使用 npm 命令即可：
npm install react-time-machine --save
使用
安装完成后，你就可以开始使用 react-time-machine 包了。在页面中引入 react-time-machine 后，你需要先导入组件：
import TimeMachine from 'react-time-machine';
然后开始使用它，例如：
-- -------------------- ---- -------
------------
---------------
----- -------
------ --
-------- -
- ----- ------ ----- --------------------------- ------ -- --
- ----- ------ ----- --------------------------- ------ -- --
- ----- ------ ----- --------------------------- ------ -- --
--
------------------ --
--
------------------ -- ----------------
---------- -- --------------------
----------- -- ---------------------
------------ -- ----------------------
----------------- -- ----------------- ----------
--------------------------- -- -------------------
--上面的代码中initialState 属性需要传入一个对象，表示初始状态配置。例如上述代码中，history 数组表示时间轴上的时间点，tickFormat 属性表示中每一个时间点的文本描述，onPlay、onPause、onRewind 和onFastForward 属性用于设置时间旅行过程中的回调函数，而onTimeSliderChange 属性则是时间轴滑块位置变化的回调函数。
示例代码
下面是一个带有样式效果的时间轮播示例，需要注意 react-time-machine 包的样式需要你自行编写。
-- -------------------- ---- -------
------ ----- ---- --------
------ ----------- ---- ---------------------
------ --------------- -- ---
----- ------------ - -
----- -------
------ --
-------- -
- ----- ------ ----- --------------------------- ------ -- --
- ----- ------ ----- --------------------------- ------ -- --
- ----- ------ ----- --------------------------- ------ -- --
--
------------------ --
--
----- ---------- - ------ -- ----------------
----- ------ - -- -- --------------------
----- ------- - -- -- ---------------------
----- -------- - -- -- ----------------------
----- ------------- - -- -- ----------------- ----------
----- ------------------ - ------- -- -------------------
----- --- - -- -- -
---- ----------------------------------
------------
---------------------------
-----------------------
---------------
-----------------
-------------------
-----------------------------
---------------------------------------
--
------
--
------ ------- ----总结
React-Time-Machine 是帮助前端 JavaScript 开发人员在他们的网站上类比电影时间机器功能的 npm 包。在使用它时，我们需要仔细设置和配置其 prop 参数。需要注意，时间轴的样式需要自行编写，最终再于 npm 包进行整合使用。如果会使用 react-time-machine 包，可以快速地实现时间轴功能，并且对于对时间线展示的项目开发，可谓是非常的有效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b4e51ab1864dac668ab