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

相关推荐
Cyann4 小时前
Day1- React基础组件使用
前端·react.js
霸气小男5 小时前
解决React中通过外部引入的css/scss/less文件更改antDesign中Modal组件内部的样式不生效问题
css·react.js
江城开朗的豌豆7 小时前
useEffect vs componentDidUpdate:谁才是真正的更新之王?
前端·javascript·react.js
江城开朗的豌豆7 小时前
解密useEffect:让副作用无所遁形!
前端·javascript·react.js
歪歪1007 小时前
Redux和MobX在React Native状态管理中的优缺点对比
前端·javascript·react native·react.js·架构·前端框架
每天吃饭的羊20 小时前
state和ref
前端·javascript·react.js
前端啵啵猪21 小时前
useCallback 和 useMemo,什么时候用才是有效的?
前端·react.js
海海思思1 天前
Redux Toolkit的前世今生:从繁琐到简洁的状态管理革命
react.js·redux
小爱同学_1 天前
React知识:useState和useRef的使用
前端·react.js
知识分享小能手1 天前
React学习教程,从入门到精通, React 新创建组件语法知识点及案例代码(11)
前端·javascript·学习·react.js·架构·前端框架·react