Redux: Was ist mit Refs?

Smart versus dumme Komponenten

Ich denke ja, Ihre _smart_- Komponente mit den Connector sollte nur _dumb_ Komponenten rendern und die erforderlichen props an sie übergeben.

@cymen du kannst dafür einen ref callback verwenden :)

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} />
  }
}

Das obige wird das div protokollieren. Vielleicht hilft das?

Dies verwendet einen Dekorateur, aber es würde wahrscheinlich genauso gut funktionieren, wenn Sie einen Rückruf an Ihre Komponenten übergeben würden, die Sie in Connector verschachtelt haben. Innerhalb des Rückrufs können Sie dann Ihrer Komponente den Ref zurückweisen.

Benötigen Sie wirklich einen verschachtelten Schiedsrichter?

Wenn Sie nur auf den DOM-Knoten zugreifen möchten, können Sie findDOMNode für die äußere Komponente ausführen, und es funktioniert einwandfrei. (Sie zeigen auf denselben Knoten.)

Wenn Sie Methoden aufrufen möchten, sollten Sie stattdessen props als deklarative Schnittstelle verwenden. Eine Diskussion hierzu finden Sie unter https://github.com/jsstyles/react-jss/issues/15 .

Wenn Sie sicher sind, dass Sie einen Schiedsrichter benötigen, können Sie sich einen verschachtelten Schiedsrichter wie https://github.com/gaearon/redux/issues/183#issuecomment -115988937 schnappen.

Zum Schluss lassen Sie mich bitte wissen, wenn etwas nicht klar ist.

Tut mir leid, aber ich sehe nicht, wie die Förderung der Verwendung von 'findDOMNode' in einem so trivialen Fall sogar als Lösung angesehen werden kann. Dies ist ein Anti-Muster! Es bringt uns zu Tagen der Abfrage zurück, in denen wir auf alle Elemente zugreifen und die Hierarchie der Knoten genau kennen müssen. Ihre Dokumente lauten zu Recht:

'findDOMNode () ist eine Escape-Luke ... Die Verwendung dieser Escape-Luke wird nicht empfohlen, da sie die Komponentenabstraktion durchdringt.'

Tut mir leid, aber ich sehe nicht, wie die Förderung der Verwendung von 'findDOMNode' in einem so trivialen Fall sogar als Lösung angesehen werden kann. Dies ist ein Anti-Muster! Es bringt uns zu Tagen der Abfrage zurück, in denen wir auf alle Elemente zugreifen und die Hierarchie der Knoten genau kennen müssen.

Ich bin mir nicht sicher was du meinst. Ich sage, wenn Sie einen Verweis auf den gerenderten Knoten benötigen (zum Beispiel um seinen Versatz und seine Größe zu berechnen), können Sie findDOMNode(this) . Ich schlage nicht vor, dass Sie „tiefer gehen“ oder es mutieren.

Das heißt, wenn Sie damit nicht zufrieden sind, verwenden Sie einfach die oben vorgeschlagenen Ref-Callback-Requisiten.

Ich denke nicht, dass wir uns auf findDOMNode(this) , da dies nicht für React-Native gilt.

@xvalentino findDOMNode ist nicht erforderlich. Siehe die Bits in Bezug auf getWrappedInstance in den API-Dokumenten .