Redux: Et les refs?

Créé le 27 juin 2015  ·  8Commentaires  ·  Source: reduxjs/redux

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?

help wanted question

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'

Tous les 8 commentaires

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'

Cette page vous a été utile?
0 / 5 - 0 notes