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;

 

 

 使用装饰器