2016-08-15 7 views
0

In der Reaktionskomponente werden Requisiten empfangen, aber die Requisitenwerte sind nicht definiert.Warum reagieren Komponente?

Meine Komponente wie folgt aussieht

class NavRoot extends Component { 
    constructor (props) { 
     super(props) 

     this._handleNavigate = this._handleNavigate.bind(this) 
    } 

    _renderScene (props) { 
     const { route } = props.scene 
     if (route.key == 'home') { 
      // here is the problem: In Home component, props received Object {_handleNavigate: undefined} 
      return <Home _handleNavigate={this._handleNavigate} /> 
     } 
    } 

    // handle navigation between scene 
    _handleNavigate (action) { 
     switch (action && action.type) { 
      case 'push': 
       this.props.pushRoute(action.route) 
       return true; 
      case 'back': 
      case 'pop': 
       return this._handleBackAction() 
      default: 
       return false; 
     } 
    } 

    render() { 
     return (
      <NavigationCardStack 
       style={{flex: 1}} 
       navigationState={this.props.navigation} 
       onNavigateBack={this._handleBackAction} 
       renderScene={this._renderScene} /> 
     ) 
    } 
} 

function mapStateToProps (state) { 
    return { 
     navigation: state.navReducer 
    } 
} 

export default connect(
    mapStateToProps, 
    { 
     pushRoute: (route) => push(route), 
     popRoute:() => pop() 
    } 
)(NavRoot) 

Und das ist, was Hauptkomponente wie folgt aussieht:

class Home extends Component { 
    constructor(props) { 
     super(props); 
    } 
    render() { 
    return (
    <View style={styles.container}> 
     <Text style={styles.title}>Home</Text> 
     <Button onPress={this.props._handleNavigate(route)} label='Go to About' /> 
    </View> 
    ) 
    } 
} 

Wenn ich auf die Schaltfläche klicken, meldet es _handleNavigate nicht definiert ist. Home Komponente erhielt Requisiten Object {_handleNavigate: undefined}

Antwort

2

bitte Ihre Konstruktorfunktion ändern:

constructor (props) { 
     super(props) 

     this._handleNavigate = this._handleNavigate.bind(this) 
     this. _renderScene = this. _renderScene.bind(this); 
    } 

weil der Kontext _renderScene nicht der Kontext NavRoot ist.