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.
Vous devez vous connecter pour publier un commentaire.
L'idée d'utiliser toujours la même prop pour le
ref
peut être réalisé par l'utilisation de proxy d'exportation de classe avec un accompagnateur.Donc en gros, oui, nous sommes obligés d'avoir un autre hélice à l'avant de la ref, mais il peut être fait en vertu du hub. Il est important que l'utilisation par le public comme une normale réf.
connect
ou marterial-l'interface utilisateur dewithStyles
?connect
ouwithStyles
? Vous devez placer tous les HOCs avecforwardRef
et de l'utiliser à l'interne "safe" prop passer une ref pour le plus bas dans la chaîne.withStyles
parce quewithStyles
utilise en interneinnerRef
, il suffit de renommer vos propres ref prop à quelque chose de différent, commecontainerInnerRef
et vous êtes bon pour aller.Fondamentalement, c'est juste un HOC de la fonction. Si vous voulais l'utiliser avec de la classe, vous pouvez le faire par vous-même et utiliser des accessoires.
Ce modèle est utilisé par exemple dans
styled-components
et il est appeléinnerRef
là.innerRef
est complètement à côté du sujet. L'objectif est la transparence: je devrais être capable de traiter un<FancyButton>
comme si c'était un élément du DOM, mais à l'aide de style-composants approche, j'ai besoin de vous rappeler que ce composant utilise un arbitrairement le nom de prop pour les refs au lieu de simplementref
.innerRef
en faveur de passage de la ref de l'enfant à l'aide deReact.forwardRef
, qui est ce que l'OP est d'essayer d'accomplir.Vous devez utiliser un autre prop nom de transmettre la ref à une classe.
innerRef
est couramment utilisé dans de nombreuses bibliothèques.beautifulInputElement
est plus une fonction plutôt que de Réagir un Élément, il doit être comme ceciconst beautifulInputElement = <BeautifulInputForwardingRef ref={ref => ref && ref.focus()} />
Ceci peut être accompli avec une composante de l'ordre, si vous le souhaitez:
Et ensuite dans votre fichier de composant:
J'ai fait le travail en amont avec les tests & a publié un package pour cela,
react-with-forwarded-ref
: https://www.npmjs.com/package/react-with-forwarded-refCas où vous avez besoin de réutiliser ce dans beaucoup de différence composants, vous pouvez exporter cette capacité à quelque chose comme
withForwardingRef
utilisation: