首先我们要知道 为什么要使用装饰器,因为在高级组件中,我们不想多级嵌套,看上去很麻烦,也很头疼,例如,我们看一下下面的例子
有时候我们的值,不得不从另一个地方去拿到的话,就需要高级组件了,来扩充我们的组件,但是这样子写,一直嵌套, 不太容易管理,所以就有了我们ES7语法的装饰器,帮我们解决了很多的麻烦,安装方法和用法 请看下面的例子
要使用装饰器 前提是你要安装一些插件
npm install --save react-app-rewired customize-cra
npm install --save babel-plugin-import
npm install --save-dev @babel/plugin-proposal-decorators
然后需要将package.json 文件配置改变成
如果想改变端口的话 可以
“start”: “set PORT 9000 && react-app-rewired start”
"scripts": {
- "start": "react-scripts start",
+ "start": "react-app-rewired start",
- "build": "react-scripts build",
+ "build": "react-app-rewired build",
- "test": "react-scripts test",
+ "test": "react-app-rewired test",
}
接下来在根路径创建 config-overrides.js
里面的配置内容 如下
const {
override,
fixBabelImports, // 按需加载配置函数
addBabelPlugins // babel插件配置函数
} = require('customize-cra')
module.exports = override(
addBabelPlugins( // 支持装饰器
[
'@babel/plugin-proposal-decorators',
{
legacy: true
}
]
),
fixBabelImports('import', { // antd 按需加载
libraryName: 'antd',
libraryDirectory: 'es',
style: 'css'
})
)
安装了一下环境后
import { Button } from “antd”;
引入一下就可以直接的使用antd的按需加载了
好了 现在我们就可以使用装饰器了
有警告 但是不影响 结果
我们解决这个警告 需要在根目录配置一个tsconfig.json 文件
{
"compilerOptions": {
"experimentalDecorators": true,
"allowJs": true
}
}
配置了以后 vscode 中就不会报错了
当然我们的装饰器 还可以接受参数 比如我们使用的redux中的connect,
这个样子 我们就可以使用redux 里面的connect组件了
注意哦,要使用装饰器,使用者必须要生命成class才可以使用
import React from "react";
import { withStyles } from "@material-ui/core/styles";
import { connect } from "react-redux";
//...
const styles = theme => ({
color: {
color: "#f60"
}
});
@connect(mapStateToProps, mapDispatchToProps)
@withStyles(style)
class Comp extends React.Component {
constructor(props) {
super(props);
this.state = {
...
};
}
//...
handleTask = () => {
this.props.onSetTask("aaa");
};
render() {
const {...} =this.props;
const { ... } = this.state;
return (
<React.Fragment>
//...
<button onClick="this.handleTask">aaa</button>
</React.Fragment>
);
}
}
ExportTable.propTypes = {
classes: PropTypes.object.isRequired
};
ExportTable.defaultProps = {
taskIdDetails: {}
};
const mapStateToProps = (state, ownProps) => {
if (state.reducerName && state.reducerName.export) {
return {
taskIdDetails: state.reducerName.export.taskIdDetails
};
} else {
return {
taskIdDetails: {}
};
}
};
const mapDispatchToProps = (dispatch, props) => {
return {
onSetTask: taskId => {
dispa个tch(setTask(taskId, props.identify));
}
};
};
export default Comp;
如果有什么问题,欢迎下面评论指出,大家一起进步,如果这篇文章 对你有用处,点个赞呗,谢谢