react装饰器

react装饰器

安装相关依赖

@hoc//@表示它是一个装饰器函数类似于*hoc表示一个生成器函数

cnpm i   @babel/plugin-proposal-decorators//支持装饰器语法
cnpm i             react-app-rewired//这个插件可以让不用通过yarn eject  弹射配置文件cnpm i             customize-cra//为了使用装饰器 

项目的根目录下建立一个 config-overrides.js

   const { override,addDecoratorsLegacy } = require('customize-cra')ports = override(addDecoratorsLegacy());

改package.json

scripts:{
“start”: “react-app-rewired start”,
“build”: “react-app-rewired build”,
“test”: “react-app-rewired test”,
}

./Hoc/index.js

import React from 'react'export default (Com)=> {return class extends React.Component {render(){return  <div>版权<Com {...this.props} /></div> }}
}

./conponent/one/index.js

import React, { Component } from 'react'
import Hoc from '../hoc'
@Hocclass One extends Component {render() {return (<div>one</div>)}
}
export default One

这样每一个用Hoc 装饰器的组件都会带有版权
但是这样的使用不能给装饰器传参，如果需要传参那么使用下面的方法：
Hoc装饰器配置

import React from 'react'
//必须采用函数柯里化
export default (p)=> (Com)=> {return class extends React.Component {render(){return  <div>版权{p}<Com {...this.props} /></div> }}
}

装饰器应用

import React, { Component } from 'react'
import Hoc from '../hoc'
@Hoc("abc")class One extends Component {render() {return (<div>one</div>)}
}
export default One