React18实现账单管理项目(三):日期分组与图标适配

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

javascript 复制代码
// 假设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,我们可以创建一个映射,将每种类型的账单与其对应的中文名称关联起来。

javascript 复制代码
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;
}, {});

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

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

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

js 复制代码
// 使用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属性动态渲染不同的图表类型。

js 复制代码
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交互,再到图表展示,每一个环节都经过精心设计,旨在为用户提供最佳的使用体验。

相关推荐
摸鱼仙人~1 小时前
styled-components:现代React样式解决方案
前端·react.js·前端框架
ohMyGod_1237 小时前
React16,17,18,19新特性更新对比
前端·javascript·react.js
前端小趴菜057 小时前
React-forwardRef-useImperativeHandle
前端·vue.js·react.js
@大迁世界7 小时前
第1章 React组件开发基础
前端·javascript·react.js·前端框架·ecmascript
骑自行车的码农8 小时前
React短文系列 遍历fiber树 App的创建
前端·react.js
爱学习的茄子9 小时前
React Hooks进阶:从0到1打造高性能Todo应用
前端·react.js·面试
Spider_Man9 小时前
🚀 从阻塞到丝滑:React中DeepSeek LLM流式输出的实现秘籍
前端·react.js·llm
10年前端老司机10 小时前
React 受控组件和非受控组件区别和使用场景
前端·javascript·react.js
安替-AnTi11 小时前
基于 React 和 TypeScript 搭建的机器学米其林餐厅数据分析项目
react.js·typescript·数据分析·毕设·米其林
FairyDiana13 小时前
从 "等一下" 到 "马上说":React 牵手 DeepSeek 玩转文本大模型
react.js·ai编程