1
votes

Est-il possible de passer une fonction avec des paramètres comme accessoire puis de référencer cette fonction comme accessoire?

Je veux faire en sorte que lorsque je clique sur le div, il se déconnecte "asdf" dans la console, mais je ne sais pas si c'est ainsi que fonctionnent les méthodes passées comme accessoires ...

export class App extends Component {
   render() {
      func = (param) => {
         console.log(param);
      }

      return (
         <Card function={this.func} />
      )
    }
}

export class Card extends Component {
   render() {
      return(
         <div onClick={this.props.function("asdf")}> this is a div </div>
      )
   }
}

javascript reactjs

2 commentaires

C'est bien, je n'utiliserais pas le mot function car il est réservé. Notez également que la façon dont vous le faites ici this à l'intérieur de func peut ne pas être ce que vous attendez.

Comme @MattWay l'a dit, vous voudrez peut-être retirer func de la méthode render () et le définir comme une fonction sur App .

3 Réponses :

3
votes

Votre idée est bonne, mais il y a deux problèmes avec cette implémentation particulière:

function est un mot-clé en JavaScript, ne l'utilisez donc pas comme identifiant.
onClick = {foo (bar)} signifie "appeler foo (bar) au moment du rendu, puis faire du résultat de cet appel le gestionnaire de clics. Vous êtes probablement want onClick = {() => foo (bar)} , ce qui signifie "appeler foo (bar) lorsque l'utilisateur clique sur l'élément".

0 commentaires

1
votes

Conseil similaire à Joseph, mais notez également que vous souhaitez extraire votre fonction de la méthode render () . Voici à quoi cela ressemblerait:

export class App extends Component {
  printParam = param => {
    console.log(param);
  };

  render() {
    return <Card printParam={this.printParam} />;
  }
}

export class Card extends Component {
  render() {
    return (
      <button
        onClick={() => {
          this.props.printParam('asdf');
        }}>
        Click Me
      </button>
    );
  }
}

0 commentaires

1
votes

Placez votre méthode personnalisée (c'est-à-dire func ) dans la portée de la classe et supprimez-la de render () . La raison pour laquelle je le dis pour supprimer de la méthode render () est lorsque l'appel this.func fait référence à this pointe vers les propriétés et méthodes de la classe . Comme il n'y aura pas de propriété ou de méthode func définie dans la portée globale de la classe, elle renverra undefined
Vous pouvez passer prop avec un nom significatif plutôt que function car la fonction pourrait indiquer le mot-clé de la fonction native comme en javascript comme Joseph l'a dit dans sa réponse

Votre code pourrait être mis à jour de cette manière:

export class App extends Component {
    func = param => {
        console.log(param);
    };
    render() {
        return <Card myFunction={this.func} />;
    }
}

export class Card extends Component {
    render() {
        return (
            <div onClick={() => this.props.myFunction('asdf')}>
                {' '}
                this is a div{' '}
            </div>
        );
    }
}

1 commentaires

Mon plaisir de vous fournir une assistance