Javascript 将本机传递函数作为道具反应到子组件

React Native pass function to child component as prop

提问by Jerred Shepherd

I'm new to React Native (and React), and I'm trying to pass a function as a prop to a component.

我是 React Native（和 React）的新手，我正在尝试将函数作为 prop 传递给组件。

My goal is to create a component where its onPress functionality can be set by the instantiator of the component, so that it is more reusable.

我的目标是创建一个组件，它的 onPress 功能可以由组件的实例化器设置，以便更可重用。

Here is my code so far.

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

App.js

应用程序.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

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>
    );
  }
}

I am passing the handlePress function as the prop handlePress. I would expect the TouchableButton's props to contain that function, however it isn't there.

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

采纳答案by Moti Korets

When writing handlePress={this.handlePress.bind(this)}you passing a statement execution ( which when and if executed returns a function). What is expected is to pass the function itself either with handlePress={this.handlePress}(and do the binding in the constructor) or handlePress={() => this.handlePress()}which passes an anonymous function which when executed will execute handlePress in thisclass context.

在编写handlePress={this.handlePress.bind(this)}时传递一个语句执行（当和如果执行时返回一个函数）。期望的是传递函数本身handlePress={this.handlePress}（并在构造函数中进行绑定）或handlePress={() => this.handlePress()}传递匿名函数，该函数在执行时将在this类上下文中执行 handlePress 。

回答by Jeff Gu Kang

Solution

解决方案

Use arrow functionfor no care about binding this.

使用箭头函数而不关心绑定this。

And I recommend to check null before calling the props method.

我建议在调用 props 方法之前检查 null。

App.js

应用程序.js

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

  handlePress = () => {
    // Do what you want. 
  }

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

TouchableButton.js

TouchableButton.js

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

export default class TouchableButton extends Component {
  constructor(props){
    super(props);
  }
  
  handlePress = () => {
    // Need to check to prevent null exception. 
    this.props.onPress?.(); // Same as this.props.onPress && this.props.onPress();
  }

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

回答by Naycho334

// Parent

handleClick( name ){
   alert(name);
}

<Child func={this.handleClick.bind(this)} />

// Children

let { func } = this.props;

func( 'VARIABLE' );