Vous pouvez utiliser les références :

 class Parent extends Component { constructor(props) { super(props); this.child = React.createRef(); } onClick = () => { this.child.current.getAlert(); }; render() { return ( 
  Click 
 ); } } class Child extends Component { getAlert() { alert('getAlert from Child'); } render() { return 
Hello
; } } ReactDOM.render(, document.getElementById('root')); 

Exemple de fonctionnement

J’ai mis à jour cet exemple pour refléter les modifications apscopes à React 16.3, qui utilise une nouvelle méthode de gestion des références. J’ai laissé la version de rappel d’origine ci-dessous, car elle fonctionne toujours. (Je ramènerai l’incorporation ici dès que React 16.3 sera opérationnel sur les extraits de la stack)

modifier

Les refs de chaînes vont probablement être obsolètes à l’avenir, alors voici comment vous le feriez avec les références de rappel :

 const { Component } = React; const { render } = ReactDOM; class Parent extends Component { render() { return ( 
  { this.child = instance; }} />  { this.child.getAlert(); }}>Click 
 ); } } class Child extends Component { getAlert() { alert('clicked'); } render() { return ( 
Hello
 ); } } render( , document.getElementById('app') ); 

Vous pouvez utiliser un autre modèle ici:

 class Parent extends Component { render() { return ( 
  this.clickChild = click}/>  this.clickChild()}>Click 
 ); } } class Child extends Component { constructor(props) { super(props); this.getAlert = this.getAlert.bind(this); } componentDidMount() { this.props.setClick(this.getAlert); } getAlert() { alert('clicked'); } render() { return ( 
Hello
 ); } } 

Qu’est-ce qu’il fait est de définir la méthode clickChild du parent lorsque l’enfant est monté. De cette façon, lorsque vous cliquez sur le bouton dans le parent, il appelle clickChild qui appelle getAlert de l’enfant.

Cela fonctionne également si votre enfant est enveloppé avec connect (), vous n’avez donc pas besoin du hack getWrappedInstance ().

Notez que vous ne pouvez pas utiliser onClick = {this.clickChild} dans parent car lorsque parent est rendu, l’enfant n’est pas monté, donc this.clickChild n’est pas encore affecté. Utiliser onClick = {() => this.clickChild ()} est correct car lorsque vous cliquez sur le bouton this.clickChild doit déjà être affecté.

https://facebook.github.io/react/tips/expose-component-functions.html pour plus de réponses ref ici Appeler des méthodes sur les composants React

En examinant les références du composant “reason”, vous brisez l’encapsulation et vous empêchez de refactoriser ce composant sans examiner soigneusement tous les emplacements utilisés. Pour cette raison, nous recommandons fortement de traiter refs comme privé à un composant, un peu comme dans un état.

En général, les données doivent être transmises dans l’arbre via des accessoires. Il y a quelques exceptions à cela (comme appeler .focus () ou déclencher une animation unique qui ne change pas vraiment l’état) mais chaque fois que vous exposez une méthode appelée “set”, les accessoires sont généralement un meilleur choix. Essayez de faire en sorte que le composant d’entrée interne s’inquiète de sa taille et de son apparence pour qu’aucun de ses ancêtres ne le fasse.

Si vous le faites simplement parce que vous voulez que l’enfant fournisse un trait réutilisable à ses parents, vous pouvez alors envisager de le faire en utilisant plutôt des outils de rendu .

Cette technique renverse la structure. L’ Child enveloppe maintenant le parent, je l’ai donc renommé en AlertTrait ci-dessous. J’ai gardé le nom de Parent pour la continuité, bien que ce ne soit pas vraiment un parent maintenant.

 // Use it like this:  class AlertTrait extends Component { // You may need to bind this function, if it is stateful doAlert() { alert('clicked'); } render() { return this.props.renderComponent(this.doAlert); } } class Parent extends Component { render() { return ( Click ); } } 

Dans ce cas, le AlertTrait fournit un ou plusieurs traits qu’il transmet en tant que prop pour le composant donné dans son outil renderComponent .

Le Parent reçoit doAlert comme un accessoire et peut l’appeler en cas de besoin.

(Pour plus de clarté, j’ai appelé prop renderComponent dans l’exemple ci-dessus. Mais dans le dossier React lié ci-dessus, ils l’appellent simplement render .)

Le composant Trait peut rendre des éléments entourant le parent, dans sa fonction de rendu, mais ne rend rien dans le parent. En fait, cela pourrait rendre les choses à l’intérieur du Parent, s’il transmettait un autre prop (par exemple renderChild ) au parent, que le parent pourrait alors utiliser pendant sa méthode de rendu.

Ceci est quelque peu différent de ce que demandait l’OP, mais certaines personnes pourraient se retrouver ici (comme nous l’avons fait) parce qu’elles voulaient créer un trait réutilisable, et pensaient qu’un composant enfant était un bon moyen de le faire.

Vous pouvez faire l’inversion d’inheritance (regardez ici: https://medium.com/@franleplant/react-higher-order-components-in-depth-cf9032ee6c3e ). De cette façon, vous avez access à l’instance du composant que vous encapsulerez (vous pourrez ainsi accéder à ses fonctions)