1.使用XXX.module.css文件
1)使用XXX.module.css文件可以只改变部分样式
2)module的写法对于标签名无效,可以设置id或者class
2.使用sass
1)将css文件改为.scss
2)安装sass模块
3)在样式文件中定义sass变量,
3.反向代理
1)在需要请求数据的地方写好useeffect函数,
2)在src中配置好setupProxy.js文件
3)安装配置代理中间件
cnpm i --save-dev http-proxy-middleware@1.0.6
4.配置路由
配置各级路由
5.引入antd
/************react引入antd时遇到问题---------版本不匹配问题*************/
Uncaught Error:invalid hook call . Hooks can only be called inside of the body of a function component .This could happen for one of the following resons:
解决方法
1.将node-modules文件夹先删除
2.清理缓存命令: npm cache clean --force
3.(再将项目最后的package.json的所有版本号按照视频中的版本号进行替换)
4.重新安装一次即可 npm install /cnpm install
启动后再次引入antd组件,就不会报错(也解决了其他版本不匹配问题)
6.配置高阶组件路由
在需要使用props的地方引入高阶组件withRouter,这样可以不用一层一层传值,可以直接使用props
最后需要将函数导出,并用withRouter包裹
7.json-server
1)配置json-server,https://www.npmjs.com/package/json-server 参考官方文档,安装、启动json-server
启动:json-server --watch XX.json --port 5000(端口号)
2)通过axios调用json-server数据
取数据:axios.get
增加数据:axios.post
修改数据:put【patch】
删除数据:axios.delete
取回关联数据:_embed
取回关联数据:_expand
8.利用json-server渲染侧边栏
1)渲染多级列表
2)刷新页面时,原来的高亮显示在哪里,刷新后也还在哪里
获取一级界面(openKeys)和二级界面(selectKeys)
9.JSON.parse报错
错误原因:打开了错误的.json文件