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: theme.typography.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;