Comment utiliser Réagir.forwardRef dans une classe de composant?

Je suis en train d'utiliser Réagir.forwardRef, mais trébuche sur la façon de l'obtenir pour fonctionner dans une classe de composant (non HOC).

Les docs des exemples d'utilisation d'éléments et de composants fonctionnels, même en enveloppant les classes de fonctions d'ordre supérieur composants.

Donc, commencer avec quelque chose comme cette dans leur ref.js fichier:

const TextInput = React.forwardRef(
    (props, ref) => (<input type="text" placeholder="Hello World" ref={ref} />)
);

et, au lieu de le définir comme quelque chose comme ceci:

class TextInput extends React.Component {
  render() {
    let { props, ref } = React.forwardRef((props, ref) => ({ props, ref }));
    return <input type="text" placeholder="Hello World" ref={ref} />;
  }
}

ou

class TextInput extends React.Component {
  render() { 
    return (
      React.forwardRef((props, ref) => (<input type="text" placeholder="Hello World" ref={ref} />))
    );
  }
}

seulement de travail :/

Aussi, je sais je sais, ref ne sont pas réagir de la sorte. Je suis en train d'utiliser un tiers de la toile de la bibliothèque, et souhaitez ajouter certains de leurs outils dans des composants distincts, donc j'ai besoin d'écouteurs d'événement, donc j'ai besoin du cycle de vie des méthodes. Il peut aller dans une autre route plus tard, mais je veux essayer cette.

Les docs disent que c'est possible!

Ref transfert n'est pas limité à DOM composants. Vous pouvez transférer les références à la classe des instances de composants, trop.

de la remarque: dans cette section.

Mais ensuite, ils vont à l'utilisation HOCs au lieu de simplement les classes.

InformationsquelleAutor Han Lazarus | 2018-07-25