当前位置：首页 > article >正文

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

article 2025/1/8 6:08:56

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

// 假设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;