web-dev-qa-db-fra.com

Comment accéder aux fonctions des composants enfants via les références

Les documents pour React indiquent que les fonctions des composants sont accessibles par un composant parent via des références. Voir: https://facebook.github.io/react/tips/expose-component -functions.html

J'essaye d'utiliser ceci dans mon application mais je rencontre une erreur "undefined is not a function" lorsque la fonction enfant est appelée. Je me demande si cela a quelque chose à voir avec l'utilisation du format ES6 pour les classes React parce que je ne vois aucune autre différence entre mon code et les documents.

J'ai un composant Dialog qui ressemble au pseudocode suivant. La boîte de dialogue a un bouton "Enregistrer" qui appelle save (), qui doit appeler la fonction save () dans le composant de contenu enfant. Le composant Contenu collecte des informations à partir des champs de formulaire enfant et effectue l'enregistrement.

class MyDialog extends React.Component {
  save() {
    this.refs.content.save();                    <-- save() is undefined
  }

  render() {
    return (
      <Dialog action={this.save.bind(this)}>
        <Content ref="content"/>
      </Dialog>);
   }
}

class Content extends React.Component {
  save() {
    // Get values from child fields
    // and save the content
  }
}

Je pourrais plutôt transmettre un accessoire (saveOnNextUpdate) à Content puis exécuter save chaque fois que cela est vrai, mais je préfère trouver comment obtenir la méthode détaillée dans le document React ci-dessus) pour fonctionner.

Avez-vous des idées sur la façon de faire fonctionner l'approche doc ou d'accéder à la fonction de composant enfant d'une manière différente?

javascriptreactjsredux
35
MKeller

Redux connect accepte un paramètre d'option comme quatrième paramètre. Dans ce paramètre d'option, vous pouvez définir l'indicateur withRef sur true. Ensuite, vous pouvez accéder aux fonctions des références en utilisant getWrappedInstance (). Comme ça:

class MyDialog extends React.Component {
  save() {
    this.refs.content.getWrappedInstance().save();
  }

  render() {
    return (
      <Dialog action={this.save.bind(this)}>
        <Content ref="content"/>
      </Dialog>);
   }
}

class Content extends React.Component {
  save() { ... }
}

function mapStateToProps(state) { ... }

module.exports = connect(mapStateToProps, null, null, { withRef: true })(Content);

En savoir plus à ce sujet ici: https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options

Il vaut la peine de lire cet article sur l'utilisation des références et de déterminer s'il existe de meilleures approches: https://facebook.github.io/react/docs/refs-and-the-dom.html#dont-overuse-refs =

51
Arne H. Bitubekk

Une autre façon de le faire serait d'utiliser un autre nom d'accessoire (autre que ref). J'ai constaté que cela fonctionne également bien si vous utilisez une bibliothèque comme styled-components ou emotion Par exemple dans un MyComponent connecté:

<MyComponent
  ...
  innerRef={(node) => { this.myRef = node; }}
/>
2
Divyanshu Maithani