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')
		 module.exports = 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'
@Hoc
 class 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