news项目注意事项

everything

1. 以 module.css 进行编写 用 对象方式进行引入 不能用标签选择器,

可以用className

2. 安装sass

npm i sass -S

module.scss

3. react前端 跨域，用node中间件 反向代理

npm install http-proxy-middleware --save

https://create-react-app.dev/docs/proxying-api-requests-in-development

4. 使用react-router 进行路由配置

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oYYQ5U0Y-1653526318121)(C:\Users\23589\AppData\Local\Temp\WeChat Files\36184ff7c5718a63bb8acb99446aeba.png)]

`npm i react-router-dom -S-D![36184ff7c5718a63bb8acb99446aeba]

5. antd 中 Dropdown组件只可以传递一个参数
6. 通过递归将菜单栏列表渲染出来

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-V6qHxAcV-1653526318123)(C:\Users\23589\AppData\Roaming\Typora\typora-user-images\image-20220411095100707.png)]

7. prop跨组件 传递

   [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MIVmfh9x-1653526318124)(C:\Users\23589\AppData\Roaming\Typora\typora-user-images\image-20220411095802447.png)]

   [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9lGeWM2g-1653526318125)(C:\Users\23589\AppData\Roaming\Typora\typora-user-images\image-20220411100258527.png)]

使用withRouter （创建高阶组件）

8. JsonServer 可以模拟接口数据 符合 restful api 接口模式

   json-server --watch db.json --port 8000 json文件不能搞混了

​ 但使用 put修改数据会将数据结构破坏（替换式更新）

patch 可以更新修改的数据

delete 会删除相关联的表数据

发送get请求 使用 _embed=“表名” 会查询到所关联表的数据 相当于正向查询

?_expand=“表名” 相当于反向查询

9. 可以通过 创建一个icon对象来给图标 item.key

   [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SAOzFzr8-1653526318125)(C:\Users\23589\AppData\Roaming\Typora\typora-user-images\image-20220411145347968.png)]

   10. 让首页没有下拉

判断children 长度 并且使用三元 判断children是否存在

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RZOkBj2Q-1653526318126)(C:\Users\23589\AppData\Roaming\Typora\typora-user-images\image-20220411145540972.png)]

11. 根据级别字段看是否渲染 下拉菜单

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VZhXDjuZ-1653526318127)(C:\Users\23589\AppData\Roaming\Typora\typora-user-images\image-20220411150817069.png)]

12. 设置侧边栏超出范围使用滚动条

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-i7bxIkkg-1653526318127)(C:\Users\23589\AppData\Roaming\Typora\typora-user-images\image-20220411150747194.png)]

13. 侧边栏刷新页面 高亮显示 通过获取当前pathname 跟menu属性默认路由对应 defaultSelectedKeys

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VLRTybG0-1653526318128)(C:\Users\23589\AppData\Roaming\Typora\typora-user-images\image-20220411195759014.png)]

默认打开路由 使用 defaultOpenKeys

antdesign 中 加default 为非受控组件 去掉为受控组件 使用selectedKeys

第一次进入页面就可以高亮显示路由

14. 函数名应该都要大写
15. 通过 forwardRef 穿透传递数据
16. react 粒子效果直接搜索react-particles-js
17. react 进度条 nProgress
18. react 富文本 github react draft
19. 富文本转html文本 draftjs-to-html模块
    act 进度条 nProgress
20. react 富文本 github react draft
21. 富文本转html文本 draftjs-to-html模块