React18实现账单管理项目（三）：日期分组与图标适配

一、当前日数据 按照日分组

// 假设billListData是一个包含所有账单记录的对象，每个键都是一个日期字符串，值是该日期下的账单数组
const groupedBills = Object.keys(billListData).map((date) => {const dailyBills = billListData[date].filter(bill => new Date(bill.date).toDateString() === new Date(date).toDateString());return { date, bills: dailyBills };
});

这段代码通过Object.keys获取所有日期，然后使用map遍历这些日期，并使用filter方法筛选出与当前日期相匹配的账单记录。最终，我们将结果构造成一个新的对象数组，其中每个对象都包含一个日期和该日期下的所有账单。

二、中文适配

为了让应用程序更贴近本地用户，我们需要对账单类型进行中文适配。通过遍历billListData，我们可以创建一个映射，将每种类型的账单与其对应的中文名称关联起来。

export const billTypeName = Object.keys(billListData).reduce((prev, key) => {billListData[key].forEach(bill => {bill.list.forEach(item => {prev[item.type] = item.typeName; // 将type与typeName建立映射关系});});return prev;
}, {});

此外，这个映射会在首次加载时构建，并且可以被导出供其他模块使用，确保账单类型能够正确显示为中文。

三、控制显隐，点击取反，状态适配

实现了账单详情的展开/收起功能——用户可以通过点击来切换账单详情的可见性

// 使用useState钩子管理显示状态
const [show, setShow] = useState(false);// 点击事件处理器，用于切换显示状态
const toggleShow = () => setShow(!show);// 根据状态设置样式
const style = {display: show ? 'block' : 'none'
};// 渲染箭头图标，根据是否显示调整方向
return (<div><button onClick={toggleShow}><span className={`arrow ${show && 'expand'}`}></span> // 动态添加'expand'类名来改变箭头方向</button><div style={style}>{/* 这里放置要显示或隐藏的内容 */}</div></div>
);

这段代码展示了如何使用React的状态管理（useState）来控制元素的显示与隐藏，并且通过CSS类名的变化来改变箭头图标的朝向，给用户提供视觉反馈。

四、封装组件，适配多种类型图表

最后，为了使我们的应用能够支持多种类型的图表展示，我们决定封装一个通用的图表组件。这个组件将接受来自服务器的数据作为props，并根据type属性动态渲染不同的图表类型。

import React from 'react';
import Icon from './Icon'; // 假设这是一个自定义的图标组件const ChartComponent = ({ type, data }) => {// 根据传入的type渲染不同类型的图表return (<div><h3>{type}</h3><Icon type={type} /> {/* 渲染图标 */}{/* 这里可以根据type属性添加具体的图表渲染逻辑 */}</div>);
};export default ChartComponent;

---

通过上述四个部分的介绍，我们展示了如何在React 18中实现账单管理应用的一些关键特性。从数据组织到UI交互，再到图表展示，每一个环节都经过精心设计，旨在为用户提供最佳的使用体验。