Si j'utilise un <Connector>
autour de certains composants qui ont un attribut ref
, je ne peux plus y accéder via this.refs
. Je viens de refactoriser un peu pour le réparer - je suppose que c'est un peu en vain des composants intelligents par rapport aux composants stupides. Ou est-ce que je manque quelque chose de simple?
composants intelligents ou stupides
Je pense que oui, votre composant _smart_ avec les Connector
devrait simplement rendre les composants _dumb_ et leur passer le props
nécessaire.
@cymen vous pouvez utiliser un rappel ref pour cela :)
const decorator = (Base) => {
return class {
render() {
return <Base {...this.props} />
}
}
}
<strong i="7">@decorator</strong>
class Test {
render () {
return <div ref={this.props.refCallback}>my div</div>;
}
}
class Wrapper {
componentWillMount() {
this.nestedRef = null;
}
componentDidMount() {
console.log(React.findDOMNode(this.nestedRef));
}
setNestedRef = (ref) => {
this.nestedRef = ref;
}
render() {
return <Test refCallback={this.setNestedRef} />
}
}
Ce qui précède enregistrera le div. Peut-être que cela aide?
Cela utilise un décorateur, mais cela fonctionnerait probablement aussi bien si vous transmettiez un rappel à vos composants que vous avez imbriqués dans Connector
. Dans le rappel, vous pouvez ensuite attribuer la référence à votre composant.
Avez-vous vraiment besoin d'une référence imbriquée?
Si vous voulez simplement accéder au nœud DOM, vous pouvez faire findDOMNode
sur le composant externe et cela fonctionnera très bien. (Ils pointeront vers le même nœud.)
Si vous souhaitez appeler des méthodes, envisagez d'utiliser props
comme interface déclarative à la place. Voir également https://github.com/jsstyles/react-jss/issues/15 pour une discussion à ce sujet.
Enfin, si vous êtes _certain_, vous avez besoin d'un ref, oui, vous pouvez prendre un ref imbriqué comme @johanneslumpe suggéré dans https://github.com/gaearon/redux/issues/183#issuecomment -115988937.
En terminant, faites-moi savoir si quelque chose n'est pas clair.
Désolé mais je ne vois pas comment encourager l'utilisation de «findDOMNode» dans un cas aussi trivial peut même être considéré comme une solution. C'est un anti-pattern! Cela nous ramène à des jours de jquery où nous devons accéder à tous les éléments et connaître exactement la hiérarchie des nœuds. Vos documents lisent à juste titre:
'findDOMNode () est une trappe d'échappement ... l'utilisation de cette trappe d'échappement est déconseillée car elle perce l'abstraction du composant'
Désolé mais je ne vois pas comment encourager l'utilisation de «findDOMNode» dans un cas aussi trivial peut même être considéré comme une solution. C'est un anti-pattern! Cela nous ramène à des jours de jquery où nous devons accéder à tous les éléments et connaître exactement la hiérarchie des nœuds.
Je ne sais pas ce que tu veux dire. Je dis que, si vous avez besoin d'une référence au nœud rendu (par exemple, pour calculer son décalage et sa taille), vous pouvez utiliser findDOMNode(this)
. Je ne vous suggère pas «d'aller plus loin» ou de le muter.
Cela dit, si vous n'êtes pas satisfait de cela, utilisez simplement les accessoires de rappel de référence comme suggéré ci-dessus.
Je ne pense pas que nous devrions dépendre de findDOMNode(this)
car cela ne s'applique pas à React-Native.
@xvalentino findDOMNode n'est pas nécessaire. Voir les bits liés à getWrappedInstance
dans la documentation de l'
Commentaire le plus utile
Désolé mais je ne vois pas comment encourager l'utilisation de «findDOMNode» dans un cas aussi trivial peut même être considéré comme une solution. C'est un anti-pattern! Cela nous ramène à des jours de jquery où nous devons accéder à tous les éléments et connaître exactement la hiérarchie des nœuds. Vos documents lisent à juste titre:
'findDOMNode () est une trappe d'échappement ... l'utilisation de cette trappe d'échappement est déconseillée car elle perce l'abstraction du composant'