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;

如果有什么问题,欢迎下面评论指出,大家一起进步,如果这篇文章对你有用处,点个赞呗,谢谢

React 装饰器的使用相关推荐

[react] 装饰器(Decorator)在React中有什么应用？
[react] 装饰器(Decorator)在React中有什么应用? connect.withRouter,等类似的高阶组件都可以用装饰器来使用个人简介我是歌谣,欢迎和大家一起交流前后端知识.放 ...
chapter2.3、react高阶组件，装饰器
React 技术高阶组件 let Root = props => <div>{props.schoolName}</div>; 如果要在上例的Root组件进行增强怎么办 ...
react——@修饰器——高阶组件的使用——通过装饰器来调用高阶组件——简单修改样式
使用装饰器@ 装饰器用来装饰类的,可以增强类,在不修改类的内部的源码的同时,增强它的能力(属性或方法) 装饰器使用@函数名写法,对类进行装饰,目前在js中还是提案,使用需要配置相关兼容代码库. re ...
React 中 TypeScript 和装饰器及 Hooks
概念 TypeScript 是强类型语言,相对于JavaScript 弱类型语言,它具有类型检测的功能,扩展了JavaScript 的语法. TS的安装与执行: //全局安装typescript np ...
React之函数式组件和高阶组件（装饰器、带参装饰器）
import React from 'react'; // 此句不能少 import ReactDom from 'react-dom';const Wrapper = props => < ...
React使用cra创建项目，开启装饰器
前言今天使用 cra 创建了个项目.打算研究一下 rc-form 的实现思路.发现项目并未开启装饰器.并提示下面的错误. Support for the experimental syntax 'd ...
Javascript 装饰器极速指南
pablo.png Decorators 是ES7中添加的JavaScript新特性.熟悉Typescript的同学应该更早的接触到这个特性,TypeScript早些时候已经支持Decorators的 ...
create-react-app 配置scss,ant-design，装饰器，代理，node支持最新语法，express es6 后端，链接mongodb...
新建一个项目 npm install -g create-react-app create-react-app my-app cd my-app npm i npm start # 或者,npm 5. ...
redux VS mobx (装饰器配合使用)
前言:redux和mobx都是状态管理器,避免父级到子级再到子子级嵌套单向数据流,可以逻辑清晰的管理更新共享数据.(刷新页面redux储蓄数据即消失) 配置使用装饰器(使用高阶函数包装你的组件): n ...

React 装饰器的使用

React 装饰器的使用相关推荐

最新文章

热门文章