react 装饰器

使用装饰器定义

装饰器是一种函数，写成 @函数名。它可以放在类和类方法的定义前面。react脚手架创建的项目默认是不支持装饰器，需要手动安装相关模块和添加配置文件。

• 安装相关模块

npm i -D customize-cra react-app-rewired

• 修改package.json文件中scripts命令

"scripts": {

"start": "react-app-rewired start",

"build": "react-app-rewired build",

"test": "react-scripts test",

"eject": "react-scripts eject"

}

• 添加config-overrides.js配置文件

此文件可以理解为就是webpack.config.js的扩展文件

const path = require('path')

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

const customize = () => (config, env) => {

config.resolve.alias['@'] = path.join(__dirname, 'src')

return config

}

module.exports = override(

disableEsLint(),

addDecoratorsLegacy(),

customize()

)

fn.js文件

import React, { Component } from 'react'

// 高阶组件  == 装饰器有参数写法
// 使用装饰器中有传数据，则需要在回调用再次返回一个函数
/* export default (...args) => {
  console.log(args);
  return Cmp => {
    return class extends Component {
      render() {
        return <Cmp>几个参数</Cmp>
      }
    }
  }
} */

/* export default (...args) => Cmp => {
  return class extends Component {
    render() {
      return <Cmp>{args.join('####')}</Cmp>
    }
  }
} */

/* export default (...args) => Cmp => {
  return function () {
    return <Cmp>{args.join('####')}</Cmp>
  }
} */

// 高阶组件
/* export default (...args) => Cmp => () => {
  return <Cmp>{args.join('####')}</Cmp>
} */

export default (...args) => Cmp => () => <Cmp>{args.join('####')}</Cmp>

import React, { Component } from 'react';
import withCmp from '../hoc/withCmp'
import fn from '../hoc/fn'
// 它就是一个函数 装饰器(它是类配套) decorator
@withCmp

// 高阶组件传参数
@fn('aaa','bbb')
class Home extends Component {
  render() {
    return (
      <div>
        {this.props.title}
        我是一个组件
        <hr />
        {this.props.children}
      </div>
    );
  }
}

export default Home;

使用装饰器