陣營 - 終極版@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