react高阶组件装饰器的使用与配置

高阶组件装饰器的写法

高阶组件链式的写法逻辑比较绕，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   是原始的组件，需要加强的
}