wake-up-neo.com

Reagieren Sie die native Pass-Funktion auf die Kindkomponente als Requisite

Ich bin neu in React Native (und React) und versuche, einer Komponente eine Funktion als Requisite zu übergeben.

Mein Ziel ist es, eine Komponente zu erstellen, deren OnPress-Funktionalität vom Instanziator der Komponente festgelegt werden kann, um sie wiederverwendbar zu machen.

Hier ist mein Code soweit.

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

Ich übergebe die handlePress-Funktion als Requisite handlePress. Ich würde erwarten, dass die Requisiten des TouchableButton diese Funktion enthalten, sie ist jedoch nicht vorhanden.

javascriptreactjsreact-native
4
Jerred Shepherd

Beim Schreiben von handlePress={this.handlePress.bind(this)} übergeben Sie eine Anweisungsausführung (wobei wann und wenn eine Funktion ausgeführt wird). Es wird erwartet, dass die Funktion selbst entweder mit handlePress={this.handlePress} übergeben wird (und die Bindung im Konstruktor ausgeführt wird) oder handlePress={() => this.handlePress()}, die eine anonyme Funktion übergibt, die bei ihrer Ausführung handlePress im this-Klassenkontext ausführt.

2
Moti Korets
// Parent

handleClick( name ){
   alert(name);
}

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

// Children

let { func } = this.props;

func( 'VARIABLE' );
2
Naycho334

Lösung

Verwenden Sie die arrow-Funktion und kümmern Sie sich nicht um die Bindung von this.

Ich empfehle vor dem Aufruf der props-Methode den Wert null zu prüfen.

App.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

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

0
Jeff Gu Kang