装饰器是一种函数，写成 @函数名。它可以放在类和类方法的定义前面。react脚手架创建的项目默认是不支持装饰器，需要手动安装相关模块和添加配置文件。
npm i -D customize-cra react-app-rewired
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
此文件可以理解为就是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;
原文：https://www.cnblogs.com/ht955/p/14717393.html