@connect(state => state) 这种语法究竟如何使用

#1

我安装了babel，也尝试在.babelrc和活着package.json中进行配置

  "babel": {
    "presets": [
      "es2016"
    ]
  },

但是这种语法总是不通过，试了很多方法，谁能指点一下，谢谢各位。

#2

不知道，关注下。
搜索了下babel，不知道是不是这个？Decorators transform

#3

就是 decorator，然后里面那个是函数

#4

就是一个语法糖啊，具体可见

#5

修饰器模式

@bar
foo

大体可以等价于

foo = bar(foo)
#6

挖坟贴
用过下面这种形式吗？

function mapStateToProps(state) {
  return { todos: state.todos }
}

function mapDispatchToProps(dispatch) {
  return { actions: bindActionCreators(actionCreators, dispatch) }
}
export default connect(mapStateToProps, mapDispatchToProps)(TodoApp)

接着给他变个样子

export default connect(
      state => ({state.todos}), 
      dispatch => bindActionCreators(actionCreators, dispatch)
)(TodoApp)

这样写看起来很别扭是不是，没事，用修饰器@优化一下。

@connect(
    state => ({state.todos}), 
     dispatch => bindActionCreators(actionCreators, dispatch)
)
export default class TodoApp extends React.Component {

}

换一个姿势，还是同一个东西

那么babel需要配置什么呢

plugins: [
    "transform-decorators-legacy"
]

npm 安装

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

1 Like
#7

正解，我觉得楼主是babel没配置插件导致报错。