高阶组件装饰器的写法
高阶组件链式的写法逻辑比较绕,es7中有一个优秀的语法-装饰器,专门用来处理这种问题
1.首先装插件
npm install --save-dev babel-plugin-transform-decorators-legacy
2.在项目根目录中找到config-overrides.js这个文件,如果没有就新建一个,配置如下
const { injectBabelPlugin } = require("react-app-rewired");
module.exports = function override(config, env) {
config = injectBabelPlugin(
["@babel/plugin-proposal-decorators", { legacy: true }],
config
);
return config;
};
//配置完成重启服务
3.使用方法:例如
import React,{Component} from 'react';
//withLog是一个高阶组件,接收一个组件,返回一个加强的组件
const withLog=Comp=>{
console.log(‘我是高阶组件’)
return props=><Comp {...props}></Comp>
}
@withLog
class namexx extends Component{
//namexx 是原始的组件,需要加强的
}