向 React 应用添加日历
两个月前，我向大约 80 位听众（当然是通过线上方式）展示了我的 React-Hooks-Redux Web 应用。展示结束后，我收到了不少关于如何实现日历库以及如何根据用户点击日期动态渲染数据的问题。
应要求，这里我将分享我如何借助一个简单而强大的 React 库来构建一个交互式日历的小小历程。
利用 React Calendar 库
市面上有很多日历库，我只是选择了找到的第一个：React-Calendar。
文档清晰易懂，对新手非常友好。我只是按照“tl;dr”（太长不看）部分中的三个步骤操作的：
- 通过执行
npm install react-calendar或进行安装yarn add react-calendar。 - 通过添加 . 导入
import Calendar from 'react-calendar'。 - 通过添加来使用
<Calendar />。使用onChange属性获取新值。
瞧！我们竟然不用从零开始就建好了一个日历！开源社区万岁！🙌
将日历连接到数据
太好了，我们页面上已经有了格式正确的日历。我们该如何将日历日期与数据中指定的日期关联起来呢？
在 React Calendar 的文档中，有一个基本用法部分，作者在其中演示了如何使用onChangeprop 来保存当前点击的日期：
import React, { Component } from 'react';
import Calendar from 'react-calendar';
class MyApp extends Component {
state = {
date: new Date(),
}
onChange = date => this.setState({ date })
render() {
return (
<div>
<Calendar
onChange={this.onChange}
value={this.state.date}
/>
</div>
);
}
}
这是我利用 React Hooks 实现的简化版函数组件版本：
import React, { useState } from 'react';
import Calendar from 'react-calendar';
export default function Results() {
// set states of calendar date
const [calDate, setCalDate] = useState(new Date())
function onChange (calDate) {
// change results based on calendar date click
setCalDate(calDate)
}
return (
<div className="result-calendar">
<Calendar onChange={onChange} value={calDate} />
</div>
)
}
然后，在我的onChange函数内部，我获取了我的数据（userResults），将它们与当前突出显示的日历日期进行比较，并只显示日期相同的那些数据。
诀窍——也是我面临的最大挑战——是确保数据中的日期格式与 React-Calendar 的日期格式相匹配。
onChange以下是我的函数的完整代码片段：
function onChange (calDate) {
setCalDate(calDate)
const filteredResults = userResults.filter(result => {
const newResultFormat = new Date(result.created_at).toLocaleString().split(",")[0]
const newCalDateFormat = calDate.toLocaleString().split(",")[0]
return newResultFormat === newCalDateFormat
})
}
造型
最后，借助库自带的 CSS，您可以随意调整字体和颜色。
但首先，别忘了将 CSS 导入到你的 JS 文件中：
import 'react-calendar/dist/Calendar.css';
然后，在您自己的样式表中，调整适合您应用程序的自定义样式。我的方法是在控制台的元素检查器中查看显示内容，找出哪个选择器控制哪个布局，然后相应地调整样式，如下所示：
.react-calendar__month-view__weekdays {
color: gray;
}
.react-calendar__navigation button {
font-size: 1em;
}
说实话，考虑到这是我第一次将外部 React 库集成到我的第一个 React-Hooks-Redux 应用中，我并不确定这种实现方式是否可行。
结果证明，这些任务并没有我想象的那么艰巨。
所以，这次经历最大的收获是：我们都需要对自己多一些信心。只要迈出第一步，尝试，再尝试。
文章来源：https://dev.to/liaowow/adding-calendar-to-your-react-app-1i0o