redux @connect不起作用，但connect()起作用

Question

我无法使用@connect()语法来代替export default connect()

我注意到当我使用通常的语法

class PhonePage extends Component { ... }

export default connect(state => ({
        testedByPhone: state.phonepage.testedByPhone
    }),
    (dispatch) => ({
        actions: bindActionCreators(testUserPhone, dispatch)
    })
)(PhonePage)

我在我的商店里注册了我的州。

看起来是这样的：Object {screenProps: undefined, navigation: Object, testedByPhone: Object}

但是，当我使用@connect装饰器使事情变得更干净时，我没有得到任何在我的状态中列出的东西。

@connect(
    state => ({
        testedByPhone: state.phonepage.testedByPhone
    }), 
    { testUserPhone }
)
class PhonePage extends Component { ... }

export default PhonePage

突然之间，不知何故，它实际上并没有联系到任何东西：Object {screenProps: undefined, navigation: Object}

我做错了什么，使用我看到的每个人都在使用的神奇@连接装饰器的正确方法是什么？

其余的代码，以防万一，以@connect的形式；

​

'use strict'

import React, { Component } from 'react'
import {
  AppRegistry,
  StyleSheet,
  Text,
  ScrollView,
  View,
  StatusBar,
  TouchableHighlight,
  Button,
  TextInput
} from 'react-native'
import { NavigationActions } from 'react-navigation'

import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import { testUserPhone } from './actions'

import PhoneInput from 'react-native-phone-input'

@connect(
    state => ({
        testedByPhone: state.phonepage.testedByPhone
    }), 
    { testUserPhone }
)
class PhonePage extends Component {

    constructor(){
        super()
    }

    componentDidMount() {
        // this.props.testUserPhone
    }

    render() {
        console.log(this.props)
        return(
            ...
        )
    }
}

export default PhonePage

// export default connect(state => ({
//         testedByPhone: state.phonepage.testedByPhone
//     }),
//     (dispatch) => ({
//         actions: bindActionCreators(testUserPhone, dispatch)
//     })
// )(PhonePage)

// module.exports = PhonePage

​

Answer 1

通常情况下，@connect装饰器或装饰器并不是JavaScript的本机。但是，您可以通过Babel添加它们。

您可以阅读更多关于它的here。

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

Answer 2

关于babel-6，请按照@Megaboy101的回答。

对于babel-7使用这个

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