Avoir le code suivant:
class Component1 extends React.Component {
handleOnClick = () => {
console.log('inside function');
if(typeof this.props.onClick === 'function') {
this.props.onClick(); /* Why this */
}
}
render() {
const {extraClass} = this.props;
return (
<div className={ ${(extraClass)} }>
<Component2 onClick={ this.handleOnClick } />
</div>
);
}
}
5 Réponses :
Si une fonction n'est pas transmise comme la valeur de l'accessoire, elle aurait essentiellement un autre type ou il n'y a pas de méthode non défini si aucun accessoire n'est passé. Par conséquent, cette vérification est nécessaire pour éviter toute erreur. C'est la même chose que g défini dans x. Par conséquent, si vous essayez d'invoquer, cela lancera une erreur.
Je ne comprends pas complètement la raison de la vérification si l'accessoire "OnClick" est une fonction pour l'exécuter ensuite (à nouveau?). P>
xxx pré>
acces.onclick code> pourrait être quelque chose de différent de la fonction, puis apps.onclick () échouerait avec erreur. P>Exemple:
class Component1 extends React.Component { static defaultProps = { onClick: () => null, } // every time you use props.onClick now you have assurance that it is a function // rather than undefined }
Lorsque vous utilisez Vous vérifiez que vous pouvez éviter d'obtenir une erreur comme ceci.props.onclick Vous n'êtes pas exécutant la fonction. Pour exécuter une fonction, vous devez utiliser () comme this.props.onclick () . Lorsque vous utilisez typeof ceci.props.onclick === 'fonction' Vous vérifiez le prototype de la fonction et que vous voyez si le type est une fonction ou non.
TypeError: Quelque chose n'est pas une fonction . Mais dans votre cas, vous n'avez pas besoin de le vérifier. Mais il y a des cas où est très bon de le vérifier, comme lors de l'utilisation de rappels
Je suppose que c'est une bonne pratique de vérifier toujours que votre accessoire pour la manutention des événements est défini et qu'il s'agisse d'une fonction, sinon, si vous passez aveuglément Je veux dire la plupart du temps que vous pouvez être sûr, mais si vous ne vouliez que la fonction que la fonction soit appelée si un enregistrement est chargé - vous passeriez ceci.props.onclick sur votre composant onclick et s'il le pouvait à un moment donné d'être indéfini, vous obtiendrez une erreur.
this.handleclick est une fonction toujours présente, ce qui est immédiatement exécuté lorsque votre composant est cliqué et que vous n'avez pas besoin de vérifier son type / présence, ceci.Props. OnClick est une fonction différente qui s'appelle ultérieurement à l'intérieur de celui-ci et, comme il est défini ailleurs, vous ne pouvez pas être sûr à 100% de ce que vous pensez.
onclick bas comme oncclick = {enregistrement .identifiant ? Ceci.handleonClick: non défini} . Le chèque serait nécessaire de l'arrêter d'erreurs.
dans le Peu importe quoi, Mais, ce que nous ne savons pas, c'est ce que le parent de C'est pourquoi vous devez vérifier sur le type ou pour le mettre d'une autre manière. Supposons que OK, je veux un Alors, j'ai ce projet appelé Alors, quand je vous ai cliqué, je vais simplement appeler OP a demandé dans un commentaire pour un exemple d'où il serait avantageux que le clic d'un composant enfant exécute la fonction transmise comme un accessoire par le parent.
Le principe de base est ceci:
Chaque fois que le parent Le parent pourrait "doit être informé" car il doit prendre cette information et dire à un autre enfant de faire quelque chose, ou parce qu'il veut mettre à jour son état, ou parce qu'il veut la connecter à la console. Il y a des tonnes de raisons pour lesquelles un parent voudra peut-être savoir quand quelque chose est arrivé à son enfant (en codage et dans la vie réelle). Et le rappel de la fonction est passé comme un accessoire est le moyen d'accomplir cela.
Cette même pratique s'étend au-delà du moment où un enfant est cliqué. Il peut s'appliquer si le parent doit savoir quand un enfant est sourcillé ou lorsqu'un élément enfant a une entrée de forme qui a changé de valeur, ou lorsqu'un élément enfant atteint un serveur avec une demande et obtient une réponse, c ...
Pour démontrer cela de manière rudimentaire, j'ai codé une boîte à sable rapide de code pour que vous puissiez voir. Le parent est Enfin, je recommande vivement cet article dans la documentation de ReactJS qui est intitulé "" Etat de levage UP ". Cela donne une excellente explication de cette interaction parent-enfant et de la façon dont vous laisseriez les informations débiter entre les deux. composant1 est composé d'un div et composant2 . composant2 a une fonction qu'il doit appeler lorsqu'il est cliqué. Cette fonction est appelée gileonClick , et il est défini par composant1 .
gueullclick de composant1 (qui est appelé lorsque composant2 est cliqué sur), vous vérifiez sur le type de cela.props.onclick . note que ceci.props.onclick est ce qui a été transmis à composant1 par le parent (par exemple , app ) .
gueullclick sera appelé lorsque composant2 est cliqué. C'est une fonction, et nous savons que c'est une fonction car elle est définie juste là.
composant1 est passé comme un accessoire (appelé onclick ) lorsque ce parent a décidé d'utiliser composant1 < / code>. Il a peut-être passé une fonction (auquel cas, appelez cette fonction). Mais il a peut-être passé une ficelle ou peut-être ne rien transmettre du tout (dans ce cas, ne l'appelez pas, car ce n'est pas une fonction).
de cette.props.onclick .
app est le parent qui utilise composant1 .
app dit:
composant1 . Et quand il a cliqué (tout ce que cela signifie), je veux qu'il appelait cette fonction que je passe à lui comme un accessoire, que je vais appeler onclick . .
composant1 dit:
onclick . Mais tout de moi n'est pas "cliquable". Seul le composant 2 partie de moi est "Clickable". Donc, je suppose que lorsque composant2 est cliqué, vous devez vous assurer que j'appelle cette fonction qui m'a été transmise en tant que onclick Prop. Oh, mais je ferais mieux de vous assurer que mon parent qui m'a transmis ce onclick accédez-moi est adopté une fonction, sinon de mauvaises choses vont se produire.
composant2 dit:
gueunclick , qui appartient à composant1 . C'est son travail de comprendre ce qui se passe là-bas.
Mise à jour
app . Il a composant1 comme son enfant. En fait, il a 3 instances de composant1 pour ses enfants. composant1 garde un compteur de combien de fois il est cliqué individuellement. mais , il laisse également savoir à son parent (à travers la fonction Callback transmis comme un accessoire) lorsqu'il a été cliqué, de sorte que le parent puisse garder une trace du nombre total de clics sur tous ses enfants. < / p>
J'aime la façon dont chaque réponse à cette question augmente de longueur / d'explication / d'exemples. Ceci est probablement le plus utile à op!
@Alvin Lee merci beaucoup pour votre explication. Maintenant je le vois clairement.
Mon problème était que j'ai confondu le pupitre ONCLICK du composant1, avec l'ONCLICK du composant2. Bien que je comprends bien cela maintenant, pourriez-vous me dire un cas pratique où il serait avantageux que le composant de clic sur l'enfant exécute la fonction passée comme un accessoire au parent?
@Barleby je suis content que l'explication soit utile pour vous. J'ai mis à jour ma réponse avec un exemple que vous pouvez jouer avec vous pour voir par vous-même.
Après cliquez sur l'événement, le PROP
onclick ne sera pas appelé si ce n'est pas une fonctionIl ne sert à rien de dire que votre application a implémenté
onclick comme quelque chose éteint comme un booléen, il devrait échouer fort, pas en panne silencieusement. SiOnClick est facultatif, une chèque de fausset suffirait.