ReactJS 中的水平时间轴是什么？

水平时间线是时间线或水平线图，用于描述某个时间点的某些事件。假设在给定时间或日期发生了三个事件。

Date	Event
1 Jan 2021	New Year
15 Jan 2021	Festival
22 Mar 2021	Board Exam

然后我们可以在水平时间轴中表示它，如下所示：

---(1 Jan 2021)----(15 Jan 2021)-----(22 Mar 2021)----

OnClick of 1 Jan we will show the event.    
    
    The event of 1 Jan 2021 : Happy New Year
    
OnClick of 15 Jan we will show the event.

    The event of 15 Jan 2021 : Festival
        
OnClick of 22 Mar we will show the event.

    The event of 22 March 2021 : Board Exam

创建 React 应用程序并安装模块：

第 1 步：使用以下命令创建一个 React 应用程序。
```
npx create-react-app foldername
```
第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹。
```
cd foldername
```
第 3 步：创建 ReactJS 应用程序后，使用以下命令安装 react-horizontal-timeline。
```
npm i react-horizontal-timeline
```
第 4 步：现在，使用以下命令安装 prop-types。
```
npm i prop-types
```

项目结构：它将如下所示。

项目结构

示例：现在在 App.js 文件中写下以下代码。在这里，App 是我们编写代码的默认组件。

App.js

import React, { useState } from "react";
import HorizontalTimeline from "react-horizontal-timeline";
import "./App.css";
  
function App() {
  const [value, setValue] = useState(0);
  const [previous, setPrevious] = useState(0);
  
  // Values should be only date
  const VALUES = ["2021-01-01", "2021-01-15", "2021-03-22"];
  
  // Description array corresponding to values
  const description = [
    "The event of 1 Jan 2021 : Happy New Year",
    "The event of 15 Jan 2021 : Festival",
    "The event of 22 March 2021 : Board Exam",
  ];
  
  return (
    
      
         {
            setValue(index);
            setPrevious(value);
          }}
          values={VALUES}
        />
      
      {description[value]}
    
  );
}
  
export default App;

App.css

.text-center{
   text-align: center;
}
  
.root-div{
  margin-top: 150px;
}

应用程序.css

.text-center{
   text-align: center;
}
  
.root-div{
  margin-top: 150px;
}

运行应用程序的步骤：使用以下命令从项目的根目录运行应用程序。

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出。

参考： https://www.npmjs.com/package/react-horizontal-timeline