React18完成一个信息管理系统

2022-7-7：最近做新的项目，经常会参考这个项目的代码，发现有一些可以改善的地方，新更新的内容有提到。等把APP做好，会重新整理后台的代码，并发到github，有问题的话欢迎大家评论~仓库地址在上一篇文章有。

本项目使用了react18，antd4，react-router-dom: "^6.3.0"，redux: "^4.2.0"。用于个人项目“我讲给你听”景点讲解APP。API接口是自己使用node.js+mysql完成，功能比较简单，源代码在上一篇文章http://t.csdn.cn/o8aST 《学习笔记-响应式布局，fetch，canvas，node.js》最后部分。

项目初始化可以百度一篇react项目初始化跟着做或者按照官网，本项目是使用create-react-app和npm。本项目目录结构：

目录

1、登录注册

2、路由配置

3、通过左侧导航栏跳转不同页面

4、less文件、样式

5、redux

6、表单组件动态渲染

---

1、登录注册

        封装了读写localstorage函数在js/util.js，axios在js/request，将读取到的内容存到localStorage，将数据发送到接口，成功的话useNavigate()跳转页面，使用antd表单form的onValuesChange接口，检测到用户输入时将保存的数据自动填入。

2、路由配置

App.js  使用了useRoutes，useRoutes传入的第一个参数是路由信息，需要传对应的组件进去。

index.js  这里要注意！react18更改了，可以看官网的代码。因为有使用redux，全局引入store，不用多次声明。

官网对Provider的说明：

The  component makes the Redux store available to any nested components that need to access the Redux store.

Since any React component in a React Redux app can be connected to the store, most applications will render a  at the top level, with the entire app’s component tree inside of it.

The Hooks and connect APIs can then access the provided store instance via React's Context mechanism.

谷歌翻译：

该组件使 Redux 存储可供需要访问 Redux 存储的任何嵌套组件使用。

由于 React Redux 应用程序中的任何 React 组件都可以连接到应用商店，因此大多数应用程序将在顶层呈现 a ，其中包含整个应用程序的组件树。

然后，Hooks 和 connect API 可以通过 React 的 Context 机制访问提供的存储实例。

 

IndexRouter.js 

     

3、通过左侧导航栏跳转不同页面

menuConfig.js 左侧导航栏数据，可以根据权限角色，有不同的菜单选项。key是因为list.map需要，可以自己选择填入合适的数据，以此实现权限功能。

     

 component/NavLeft Menu递归渲染二级菜单，可以看一下antd组件库示例代码。这里还可以使用antd中可伸缩的菜单，不过宽度不能随便改变，并且需要有图标。

views/admin 使用Outlet为特定路由呈现任何匹配的子元素（！十分重要）。当时使用的时候看官方文档代码对这里不太了解，不知道应该放在哪里，后来反应过来父路由元素应该是想要显示在的地方，即内容区。

React Router文档说明：

An  should be used in parent route elements to render their child route elements. This allows nested UI to show up when child routes are rendered. If the parent route matched exactly, it will render a child index route or nothing if there is no index route.

谷歌翻译：

应在父路由元素中使用 ，以呈现其子路由元素。这允许在呈现子路由时显示嵌套 UI。如果父路由完全匹配，则如果没有索引路由，它将呈现子索引路由，或者什么都不呈现。

4、less文件、样式

        react项目中使用less，需要先reject暴露配置文件，详细操作可以查看其他文章。这里主要写怎么引用，为了方便引入公共样式文件，配置了@src定向到src文件夹。需要注意的是less文件名需要用驼峰写法，有“-”文件无效。并且需要import style from '@src/less/index.less' className={{style.类名}}这样使用（因为是第一次在react项目使用less，当时做项目的时候引入less文件无效，因为想起{{}}这写内联样式时需要使用驼峰语法，试了一下发现可行。如果有更好的方法欢迎在评论区分享）。

        并且过程中有发现对antd组件，如按钮antd-btn类名做修改时，即使是在单独文件修改样式，也会改变其他页面样式，所以最好是设定另外的类名，防止后面使用时忘记，导致样式不正常。

5、redux

        redux文件夹构造：

        在写页面时，通过import action文件中的函数使用。reducer不同模块间

 store/index.js

 store/reducer/index.js 这里写代码的时候使用了combineReducer，注意不要随便加{}、()。

关于combineReducers ：

       随着应用变得越来越复杂，可以考虑将 reducer 函数 拆分成多个单独的函数，拆分后的每个函数负责独立管理 state 的一部分。

combineReducers 辅助函数的作用是，把一个由多个不同 reducer 函数作为 value 的 object，合并成一个最终的 reducer 函数，然后就可以对这个 reducer 调用 createStore 方法。

合并后的 reducer 可以调用各个子 reducer，并把它们返回的结果合并成一个 state 对象。 由 combineReducers() 返回的 state 对象，会将传入的每个 reducer 返回的 state 按其传递给 combineReducers() 时对应的 key 进行命名。

• 一个常见的问题是 Reducer 在 dispatch action 的时候是否调用了所有的 reducer。当初你可能觉得“不是”，因为真的只有一个根 reducer 函数啊。但是 combineReducer 确实有着这样的特殊效果。在生成新的 state 树时，combinerReducers 将调用每一个拆分之后的 reducer 和与当前的 Action，如果有需要的话会使得每一个 reducer 有机会响应和更新拆分后的 state。所以，在这个意义上， combineReducers 会调用所有的 reducer，严格来说是它包装的所有 reducer。
• 你可以在任何级别的 reducer 中使用 combineReducer，不仅仅是在创建根 reducer 的时候。在不同的地方有多个组合的 reducer 是非常常见的，他们组合到一起来创建根 reducer。

• 永远不能返回 undefined。当过早 return 时非常容易犯这个错误，为了避免错误扩散，遇到这种情况时 combineReducers 会抛异常。

在页面中使用时需注意对应使用

6、表单组件动态渲染

 当时做表单组件的时候，参数没有考虑周到，最近新做的项目，将参数分装在一个对象中，组件只需要传props(父传子)和value[提交表单数据]（子传父）会显得简明许多，下面介绍动态渲染，通过prop传的表单项中的type，获取渲染的组件