Node + React 实战：从 0 到 1 实现记账本（十四）

---

theme: channing-cyan

前言

账单模块还剩最后一个小节，账单详情。账单详情页要做的事情有两个，一个是编辑当前账单操作，另一个是删除当前账单操作，先来观察完成后页面结构，如下所示：

这里是第一次涉及内页，所以需要制作一个公用的头部 Header，支持传参接收 title 信息。在上一章节提取的「添加账单弹窗组件」，在这里派上了用场，新增和编辑是一家，唯一的差别就是编辑的时候，需要传入当前账单的 id 给「添加账单组件」，组件内通过账单详情接口，获取账单详情，并将获取的参数用于各个字段初始化值，这就实现了组件的复用。

知识点

• 封装公用头部组件
• 复用添加账单弹窗组件

正文开始

一.公用头部

在 components 目录下新建 Header 目录，老规矩，添加两个文件 index.jsx 和 style.module.less。

为 Header/index.jsx 添加代码如下：

```jsx import React from 'react'; import PropTypes from 'prop-types'; import { useHistory } from 'react-router-dom' import { NavBar, Icon } from 'zarm';

import s from './style.module.less'

const Header = ({ title = '' }) => { const history = useHistory() return

};