使用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;