reactjs - 评估 ( this.props.navigator ) Undefined 不是一个对象

Question

即使我正确传递了导航器 porp，我也会收到此错误。

MySetup 是这样的:主导航器页面 -> FirstView (onBtnPress) -> 详细信息

当我在firstView页面中调用this.navigator.push时遇到错误。

主文件:

import React, { Component, PropTypes } from 'react';

import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Navigator
} from 'react-native';

class app extends Component{

    constructor(props) {
        super(props); 
    }


   navigatorRenderScene(route, navigator) {
        return <route.component navigator={navigator}/>

  }
     configureScene() {
    return Navigator.SceneConfigs.VerticalDownSwipeJump;
  }


    render() {

      return (
     <Navigator
        style={styles.container}
        initialRoute= {{component: MainMapView}}
        renderScene={this.navigatorRenderScene}/>
      );
    }
}


const styles = StyleSheet.create({
  container: { flex: 1, flexDirection: 'column', padding: 20 }
});

AppRegistry.registerComponent('app', () => app);

第一个组件:

    <ActionButton buttonColor="rgba(30,144,255,1)" style={styles.fabIcon}
                  onPress={this.fabPress}>
    </ActionButton>


  fabPress() {
  this.props.navigator.push({
      component : DetaislView
    });
  }

错误发生在 fabPress 上。

关于我做错了什么有什么想法吗？

Answer 1

在您的 FirstComponent.js 中尝试一下:

class FirstComponent extends Component {

    constructor(props) {
        super(props); 
        this.fabPress = this.fabPress.bind(this);
    }

    // ... rest of the code remains the same

<小时/>

为什么我们必须这样做？

当我们使用React.createClass(ES5)时，类方法会自动绑定(bind)到类。但是当我们开始扩展(ES6类)时，我们需要将方法显式绑定(bind)到类环境。

fabPress 作为事件的回调函数传递，它在类外部的另一个环境中执行；因此 this 将来自执行环境的范围。但是我们需要类的 this 来访问 this.props.navigator :)