阵营 - 终极版@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装饰，我用大家看到正确的方法是什么？

---

的代码的其余部分，以防万一它的需要，在@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