javascript - 将原生传递函数作为子元素 react 给子组件

我是React Native(和React)的新手，我正在尝试将功能作为 Prop 传递给组件。

我的目标是创建一个组件，在该组件中可以通过该组件的实例化程序设置其onPress功能，从而使其更可重用。

到目前为止，这是我的代码。

App.js

import React, { Component } from 'react';
import { View } from 'react-native';
import TouchableButton from './components/touchable-button';

export default class App extends Component<Props> {
  constructor () {
    super();
  }

  handlePress () {
    // this should be called when my custom component is clicked
  }

  render () {
    return (
      <View>
        <TouchableButton handlePress={this.handlePress.bind(this)}/>
      </View>
    );
  }
}

TouchableButton.js

import React, { Component } from 'react';
import { TouchableHighlight } from 'react-native';
import AppButton from "./app-button";

export default class TouchableButton extends Component {
  handlePress;

  constructor(props){
    super(props);
  }

  render () {
    return (
      <TouchableHighlight onPress={
        this.props.handlePress
      }>
        <AppButton/>
      </TouchableHighlight>
    );
  }
}

我将handlePress函数作为prop handlePress传递。我希望TouchableButton的 Prop 包含该功能，但是它不存在。

最佳答案

在编写handlePress={this.handlePress.bind(this)}时，您传递了一条语句执行程序(执行该语句时(如果执行)将返回一个函数)。可以预期的是，通过handlePress={this.handlePress}(并在构造函数中进行绑定(bind))传递函数本身，或者通过匿名函数传递handlePress={() => this.handlePress()}，该函数在执行时将在this类上下文中执行handlePress。

关于javascript - 将原生传递函数作为子元素 react 给子组件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49547751/