React 使用ES7装饰器 Decorator

为什么要使用装饰器,因为在高级组件中,我们不想多级嵌套,看上去很麻烦,也很头疼,例如,我们看一下下面的例子

 

要注意, 使用装饰器, 使用者必须要用class才行

 

一、安装相关依赖

yarn add @babel/plugin-proposal-decorators  react-app-rewired customize-cra -S

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

const { override,addDecoratorsLegacy } = require('customize-cra')
module.exports = override(
   addDecoratorsLegacy()
);

三、改package.json

 "scripts": {
    "start": "react-app-rewired start",
  }

 

src/components/One/index.js

import React, { Component } from 'react'
import Hoc from '../Hoc'
@Hoc
 class One extends Component {
    render() {
        return (
            <div>
               我是被HOC包裹的子组件 One
            </div>
        )
    }
}
export default One

src/components/Hoc/index.js

import React from 'react'

export default (Com) => {
  return class extends React.Component {
    render () {
      return <div>版权 包裹
        <Com {...this.props} />
        包裹
      </div>
    }
  }
}

 

 

这样每一个用Hoc 装饰器的组件都会带有版权

但是这样的使用不能给装饰器传参，如果需要传参那么使用下面的方法：

接受参数

import React from 'react'

/** 
 * 使用函数柯里化, 才可以传参
*/
export default (prop) => (Com) => {
  return class extends React.Component {
    render () {
      return <div>版权 包裹
        <div>{prop.value}</div>
        <Com {...this.props} />
        包裹
      </div>
    }
  }
}

传参

@Hoc({value:'|我是传来的参数|'})