Question

我不确定我做错了什么，但我的组件中有一些功能。但是，我无法将其中一个函数作为道具传递，我收到this.nextScene不是函数。

这是我的组件的片段，我已经评论了我遇到问题的地方：

  nextScene() {
    this.refs.navigator.push('browse');
  }

  renderNavigationView() {
    return (
      <View style={styles.drawer}>
        <Touchable
          onPress={this.nextScene()}     //issue here, "this.nextScene is not a function"
        >
          <View style={styles.container}>
            <Text style={styles.title}>Browse</Text>
          </View>
        </Touchable>
        <Touchable>
          <View style={styles.container}>
            <Text style={styles.title}>Button</Text>
          </View>
        </Touchable>
      </View>
    );
  }

  render() {
    return (
      <DrawerLayoutAndroid
        ref="drawer"
        drawerWidth={300}
        drawerPosition={DrawerLayoutAndroid.positions.Left}
        renderNavigationView={this.renderNavigationView}>
        <Navigator
          ref="navigator"
          configureScene={(route) => {
            if (Platform.OS === 'android') {
              return Navigator.SceneConfigs.FloatFromBottomAndroid;
            }
          } }
          initialRoute={{}}
          renderScene={this.renderScene}
          />
      </DrawerLayoutAndroid>
    );
  }

谢谢！

Answer 1

如果你看一下你正在渲染的组件，并在renderNavigationView道具：

renderNavigationView={this.renderNavigationView}

似乎很好，但由于默认情况下函数中的this上下文为window，this引用window中的renderNavigationView。考虑一下您的onPress事件处理程序：

onPress={this.nextScene()}

由于您在函数中使用this.nextScene()且this引用window，因此您有效地尝试执行不存在的window.nextScene，从而抛出错误。（另请注意，这是一个调用 - 而不是引用。删除括号）。

因此，如果我尝试this.nextScene.bind(this)，我会得到cannot read property 'bind' of undefined

这是因为函数未定义，因为window.nextScene不存在。要解决此问题，请使用Function.prototype.bind正确绑定this renderNavigationView和nextScene：

renderNavigationView={this.renderNavigationView.bind(this)}

在这种情况下bind的作用是在函数中设置this上下文。由于this这里引用了类，因此该类将用于执行应该正常工作的nextScene方法。您还必须在nextScene上使用绑定，因为在nextScene内我们希望this引用类，而不是window：

onPress={this.nextScene.bind(this)}

Answer 2

使用冬天在他的回答中指出的绑定方法的另一种方法是使用箭头函数自动将this绑定到父上下文。

class MyComponent extends React.Component {
  clickHandler = (e) => {
    // do stuff here
  }

  render() {
    return (
      <button onClick={this.clickHandler}></button>
    )
  }
}

不确定我做错了什么 - 获取不是函数错误

2 个答案: