ReactJS – Comment un enfant peut-il trouver son parent?

Existe-t-il un moyen dans ReactJS pour un composant pour savoir qui est son parent?

EDIT 1: Indépendamment des mérites de faire cela, y a-t-il un moyen?

Je n'ai pas trouvé de manière réactive de faire cela – de ce que je vois, l'idée est de transférer les rappels vers l'enfant du parent et l'enfant appelle le rappel – ignorant le fait que le rappel est en réalité sur le parent.

J'ai essayé de définir une propriété "propriétaire", et cette idée semble fonctionner, mais je me demande quelle est la meilleure approche?

par exemple

<Parent> <Child owner={this}/> </Parent> 

Ensuite, dans le composant enfant, je peux faire owner.method , et cela semble fonctionner bien. Je sais que ce n'est pas une vraie relation parent / enfant, mais c'est le plus proche que j'ai trouvé dans mes tests.

Certains peuvent dire que les rappels sont un moyen plus propre de faire cela, mais la relation parent / enfant pour certaines choses (p. Ex., RadioButtonGroup et RadioButton) semble naturelle et serait utile de connaître cette relation, à mon avis.

EDIT 2: Donc, ce n'est pas possible?

Ce que je n'aime pas sur l'idée qu'il ne soit pas pris en charge, c'est que le HTML peut être marqué avec zéro javascript – et cela implique, la fonctionnalité par défaut – certains éléments sont nécessaires pour avoir des parents – ils sont définis comme des enfants d'autres éléments (P. Ex. Ul et li). Cela ne peut pas se produire dans JSX car s'il existe une interaction entre les éléments – il doit y avoir des événements javascript qui lient les composants ensemble – chaque fois que vous les utilisez. Les concepteurs ne peuvent pas simplement écrire HTML comme une syntaxe – Quelqu'un doit intervenir et mettre des liens javascript là-bas – ce qui rend la maintenance plus difficile. Je pense que l'idée a du sens pour éviter les comportements par défaut, mais les comportements par défaut devraient être pris en charge. Et les valeurs par défaut nécessiteraient de connaître soit votre parent, soit votre propriétaire.

Il y a un certain nombre d'avantages à ne pas faire cela, les deux principaux sont: la réutilisation et l'encapsulation.

TL; DR, vous ne voulez probablement pas faire cela.

Disons que notre RadioButton possède cette interface publique:

 <RadioButton active={true} onSelect={function(event){}}>text</RadioButton> 

Nous pourrions construire un autre composant appelé SuperRadioButton, qui pourrait avoir une manière différente de se présenter, mais a toujours le même api public que RadioButton, donc c'est un enfant valide de RadioButtonGroup.

Si nous accédons au parent, les composants internes du parent font partie de l'api public de ces composants et nous devons être beaucoup plus prudents avec la façon dont nous modifions notre code, car une modification de l'un de ces composants pourrait causer l'application entière casser.

Callbacks. Propriétés du propriétaire. Passer les événements à être capturé par la racine dans l'arbre. Passer la racine vers le bas à travers des contextes.

Il y a des façons, oui, mais elles sont contraires au modèle conceptuel de réaction, qui doit être explicitement en haut en tout temps en tout temps. La version courte est "vous pouvez, mais pas".

Le problème fondamental est que vous ne voulez pas qu'un enfant change en dehors des connaissances de ses parents.

Cela signifie que la seule exception à cela est la racine de l'arbre des composants, donc il est semi-légitime de transmettre un membre de ce contrôle vers le bas dans les accessoires ou les contextes, puis de "passer les choses" en racontant la racine, qui peut alors se repeindre .

La couche d'application Flux fait quelque chose de terriblement différent de celui-ci, mais transmet des choses en dehors de l'hiérarchie des composants entièrement à un DataStore, qui diffuse les choses dans les événements.