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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/keji_123/article/details/89186934

高阶组件装饰器的写法

高阶组件链式的写法逻辑比较绕,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   是原始的组件,需要加强的
}
展开阅读全文

没有更多推荐了,返回首页