React 装饰器的使用

React 装饰器的使用

React 装饰器

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

有时候我们的值,不得不从另一个地方去拿到的话,就需要高级组件了,来扩充我们的组件,但是这样子写,一直嵌套, 不太容易管理,所以就有了我们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;

 
 

加油！