React应用中使用装饰器

React应用中使用装饰器

使用create-react-app创建项目后执行

npm run eject  //把project的相关配置信息以及依赖信息弹射出来

安装babel插件

Babel >= 7.x

npm install --save-dev @babel/plugin-proposal-decorators

babel@6.x

npm install --save-dev babel-plugin-transform-decorators-legacy

修改package.json文件的babel配置项

Babel >= 7.x

{"plugins": [["@babel/plugin-proposal-decorators", { "legacy": true }],]
}

babel@6.x

"babel": {"plugins": ["transform-decorators-legacy"],"presets": ["react-app"]
},

react + redux中具体使用

使用前

import React from 'react';
import {connect} from 'react-redux';
import actions from '../../redux/actions/index';class MyComponent extend React.Component {render() {return (<div className='my-component'>test my component</div>);}
}function mapStateToProps(state) {return {userInfo: state.userInfo};
}function mapDispatchToProps(dispatch) {return {saveUserName: function (userInfo) {dispatch(actions.saveUserName(userInfo))}}
}//如果此处还使用了相关UI框架的话(比如 Ant Design, Material ui),那么下面的代码就会更长变得难以理解
export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);

使用后

import React from 'react';
import {connect} from 'react-redux';
import actions from '../../redux/actions/index';
import {withStyles} from 'material-ui/styles'function mapStateToProps(state) {return {userInfo: state.userInfo}
}function mapDispatchToProps(dispatch) {return {saveUserName: function (userInfo) {dispatch(actions.saveUserName(userInfo))}}
}const styles = theme => {console.log(theme);  //material ui 主题配置信息(可自定义主题)return {'my-component': {color: '#f00',fontSize: pography.pxToRem(20)}}
};@connect(mapStateToProps, mapDispatchToProps) //还可以添加其他装饰器,装饰器会由里之外的顺序执行
//如果使用了material ui 1.x,基本都会用到下面这个装饰器
@withStyles(styles) // 这将会将styles中的样式以props的方式传递进组件(传递进组件的名字为 classes)
class MyComponent extends React.Component {render() {const {classes} = this.props; //获取样式信息return (<div className={classes['my-component']}>test my component</div>);}
}export default MyComponent;