解决react组件css冲突的问题
- 首先要把要使用的css文件的 后缀和文件名之间加 .module
例：
Home.module.css
About.module.css
- 在要使用css文件组件内部导入对应的css文件，把文件内的每个类的css样式当成一个对象
import home from './Home.module.css'
import about from './About.module.css'
- 标签内部定义class类名的时候调用文件内的 要使用的类对象
<div className={home.tit}></div>
<div className={about.tit}></div>
react组件中利用高阶组件进行路由懒加载（按需加载组件）
- 利用高阶组件来封装一个函数来进行路由懒加载
- 新建一个js文件用来封装函数 文件名为
AsyncComponent.js(译为：异步加载组件，文件名可随意)
- 文件的主要作用是用来封装处理路由懒加载的高阶组件
- 高阶组件的英文名为 HOC 。
- 当一个函数的参数是 函数、对象、组件的情况下并且该函数返回一个新的组件这个组件称为高阶组件。
AsyncComponent.js文件内部书写内容
import React ,{Component} from 'react'
- 定义一个函数并暴露出去,定义一个接收的参数，它表示的是一个组件或对象
export default function AsyncComponent(inportComponent){
//由于函数要返回一个组件所以定义一个组件
class App extends Compomemt{
constructor(props){
super(props)
this.state={
component:null
}
}
//由于必须等组件挂载完成后才能导入新组件，同时设为它的状态值
// 所以通过 async componentDidMount() 来进行异步操作
async componentDidMount(){
// 利用await 来等参数传过来的时候才进行赋值然后设为状态值
const {default:component}=await imporeComponent()
this.setState({
component:component
})
}
render(){
comst C=this.state.component
//获取的参数赋值给 C 判断C组件标签是否存在
return C?<C/>:null
}
}
//返回这个组件
return App
}
- 返回主组件
* import AsyncComponent from '高阶组件地址'
* const Home=AsyncComponent(()=>require('组件地址'))
处理react脚手架build（打包）以后空白页
在package.json文件中添加："homepage":"./" 即可
添加位置：与其他的配置组件对象并列即可
react移动端如何做适配
- 移动端适配需要安装3个依赖
npm i postcss-px2rem lib-flexible postcss-loader --save-dev
- 然后在项目src文件内的 index.js 中引入 lib-flexible
import 'lib-flexible'
- 接着，在项目config目录下的 webpack.config.js 中引入 postcss-px2rem
- 由于config目录被隐藏 所以要先展示隐藏文件
- 利用 eject 命令来展示隐藏文件 此过程不可逆，展示过后将无法再次隐藏慎重考虑
- 严格按照操作步骤来进行操作不然会报错
1. git init
2. git add .
3. git commit -m '随意写个名字即可'
4. yarn eject 或者 npm run eject
- 在展示隐藏文件过后，在项目config目录下的 webpack.config.js 中引入 postcss-px2rem，位置看文件内容，他们放哪你放哪
const px2rem = require('postcss-px2rem')
- 在 webpack.config.js 的 postcss-loader loader里面添加，下列代码。注：代码较多要认真查找
* {
loader: require.resolve('postcss-loader'),
options: {
/* 省略代码... */
plugins: () => [
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
}),
px2rem({remUnit: 37.5}),/*'只有此处才是要添加的内容其他的则是附近的代码 remUnit 的值为移动端的尺寸'*/
/* 省略代码... */
],
sourceMap: isEnvProduction && shouldUseSourceMap,
},
}
6. 做完适配后只需按正常的 px 单位来书写代码即可。
7. 重启服务器
