1
votes

Comprendre la fonction de passage comme accessoire dans l'exemple de Tic Tac Toe React

Je suis un débutant en React. Dans le Tutoriel Tic Tac Toe sur le site officiel de React, il y a 3 composants:

Carré
Tableau (composé de 3x3 composants carrés)
Jeu (parent de Board)

L'idée est que chaque fois qu'un composant carré est cliqué, l'événement cliqué passera au plateau et plus loin au composant de jeu. Le Game Component gérera cet événement onClick.

 <Board onClick={i => this.handleClick(i)}/>

handleClick (i) est une fonction à l'intérieur du Board Component.

Board Component

<button className="square" onClick={props.onClick}></button>

Square Component

<Square onClick={() => this.props.onClick(i)}/>

Le code ci-dessus l'extrait de code provient de index.js à l'adresse: CodePen

Ce que je n'ai pas compris, c'est ce que signifie:

 <Board onClick={i => this.handleClick(i)}/>

Que signifie i ici? D'où est ce que ça vient ? Si nous supprimons i alors pourquoi la fonction ne fonctionne-t-elle pas?

reactjs

3 commentaires

Je préfère qu'ils l'ont écrit comme e pour événement , c'est déroutant comme i .

@PFuster En fait, comme le composant Board n'a pas de gestionnaire onClick natif, je ne pense pas que e fait référence à un événement. Si vous suivez la chaîne d'appel, i est probablement un entier faisant référence à l'index du carré.

Oh mon mal c'est vrai. Dans ce cas, c'est leur accessoire de composant personnalisé!

4 Réponses :

0
votes

i est la valeur de retour de ses enfants (la valeur de retour de l'événement onClick de Square).

0 commentaires

0
votes

Comme dans le code, le composant Board a un props de type function qui est appelé lorsque son div est cliqué

   onClick={() => this.props.onClick(i)}

Donc sur son parent, les props sont injectés avec une fonction qui accepte le premier paramètre comme l'index du conseil. Dans ce cas, ils utilisent une fonction de flèche pour définir ces accessoires de fonction.

0 commentaires

3
votes

C'est un paramètre d'une fonction de flèche . Les fonctions fléchées sont une manière simplifiée d'écrire une fonction, où les parenthèses sont parfois facultatives .

~~Le premier paramètre de la propriété onClick est généralement l'événement lui-même. Il s'agit donc simplement de passer l'événement à handleClick.~~

2 commentaires

En regardant la fonction handleClick , il prend l'index i comme paramètre et non event puisque i est directement utilisé pour faire référence à un élément de tableau carré. Pouvez-vous expliquer comment l ' index du carré a été propagé à partir de l'enfant Square?

@bhavesh La seule fois où onClick est appelé avec l'événement le déclenchant, c'est sur l'élément bouton. Ils pourraient faire des choses avec l'événement comme ça // faire des choses avec l'événement} ou comme ça

1
votes

i => this.handleClick (i) est un déclaration de fonction de flèche . C'est assez similaire à la déclaration boundFunction ci-dessous:

function myFunction(i) {
  this.handleClick(i);
}
const boundFunction = myFunction.bind(this);

onClick = {i => this.handleClick (i)} est le moyen de passer une propriété à un composant. Cela vous permet d'accéder à la fonction dans le composant Board via this.props.onClick et d'exécuter cette fonction via this.props.onClick (whatEverValueYouWant) .

=> Square.props.onClick () => Board.props.onClick (i) => Game.handleClick (i)

Le clic sur le bouton déclenche le onClick fonction définie sur la balise de bouton. Cette fonction est définie comme this.props.onClick qui fait référence à la propriété Square onClick définie sur la balise Square comme suit: () => this.props.onClick (i) code >, avec i faisant référence à l'index du Square. Cette fonction est donc appelée avec l'événement natif qui n'est pas utilisé. La fonction aurait pu être définie comme ça (event) => this.props.onClick (i) . Puisque l'événement n'est pas utilisé, il est inutile de déclarer cet attribut.

Sur la balise Square, this.props.onClick fait référence à la propriété Board onClick définie comme ça: (i) => this.handleClick (i) . Ainsi, un clic sur le bouton déclenche la méthode handleClick définie dans le composant Game avec une valeur d'index i définie quelque part dans le composant Board, probablement dans une boucle rendant tous les Squares.

p >

0 commentaires