Wie, um Zugriff auf die untergeordneten Funktionen der Komponente über refs

Den docs für Reagieren Zustand, dass die Funktionen der Komponente zugegriffen werden kann, von einer übergeordneten Komponente über refs. Siehe: https://facebook.github.io/react/tips/expose-component-functions.html

Ich bin versucht, diese in meiner Anwendung, sondern laufen in einem "undefined ist nicht eine Funktion" Fehler, wenn das Kind die Funktion aufgerufen wird. Ich Frage mich, ob dies hat nichts zu tun mit dem ES6-format für die Klassen Reagieren, da sehe ich keine anderen Unterschiede zwischen meinem code und der Dokumentation.

Ich habe eine Dialog-Komponente, die aussieht wie der folgende pseudocode. Der Dialog hat einen "Speichern" - button, der ruft save(), die zum Aufruf der save () - Funktion, in der die untergeordneten Content-Komponente. Die Content-Komponente sammelt Informationen von den untergeordneten form-Felder und führt die speichern.

class MyDialog extends React.Component {
  save() {
    this.refs.content.save();                    <-- save() is undefined
  }

  render() {
    return (
      <Dialog action={this.save.bind(this)}>
        <Content ref="content"/>
      </Dialog>);
   }
}

class Content extends React.Component {
  save() {
    //Get values from child fields
    //and save the content
  }
}

Ich könnte stattdessen passieren einen prop (saveOnNextUpdate) nach Inhalt und führen Sie dann sparen, wenn es wahr ist, aber ich würde lieber herausfinden, wie man die Methode detailliert Reagieren doc oben zu arbeiten.

Irgendwelche Ideen auf, wie man die doc-Ansatz zu arbeiten oder den Zugriff auf die untergeordnete Komponente Funktion auf eine andere Weise?

  • Welche version von reagieren Sie?
  • Ihre pseudo-Beispiel funktioniert: jsfiddle.net/vbj34euk so ist es wahrscheinlich ein anderes Problem. Könnten Sie die post mehr von den richtigen code?
  • Für verpackte Komponente( eine Komponente, die angeschlossen ist, um redux oder andere plugins ). wir müssen getWrappedInstance() auf, um die verpackte Instanz und dann können wir auf den Staat, refs und Methoden der Komponente. Hier ist das video zu erklären, es - youtu.werden/VpdKjocgCtA
InformationsquelleAutor MKeller | 2015-11-30
  1. 51

    Redux Verbindung akzeptiert eine option Parameter als vierten parameter. In dieser option parameter können Sie die Flagge withRef zu wahren. Dann können Sie auf die Funktionen zugreifen zu refs mithilfe getWrappedInstance(). Wie diese:

    class MyDialog extends React.Component {
  save() {
    this.refs.content.getWrappedInstance().save();
  }

  render() {
    return (
      <Dialog action={this.save.bind(this)}>
        <Content ref="content"/>
      </Dialog>);
   }
}

class Content extends React.Component {
  save() { ... }
}

function mapStateToProps(state) { ... }

module.exports = connect(mapStateToProps, null, null, { withRef: true })(Content);

    Lesen Sie mehr über es hier: https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options

    Lesenswert, dieser Artikel über die Verwendung von refs und prüfen, ob es bessere Ansätze: https://facebook.github.io/react/docs/refs-and-the-dom.html#dont-overuse-refs

    • string-ref ist veraltet
    • Ich würde mehr geben Daumen nach oben, wenn ich könnte. Verbrachte Stunden auf der Suche nach einer Lösung. Dieser nagelte ihn. 🙂
    • Es funktioniert. Danke
    InformationsquelleAutor Arne H. Bitubekk
  2. 2

    Einen alternativen Weg, um dies zu tun wäre, um einige andere prop-name (andere als ref). Ich habe festgestellt, dass dies auch gut funktioniert, wenn Sie mit einer Bibliothek wie styled-components oder emotion Zum Beispiel in einem angeschlossenen MyComponent:

    <MyComponent
  ...
  innerRef={(node) => { this.myRef = node; }}
/>
    InformationsquelleAutor Divyanshu Maithani
  3. -2

    Als es stellt sich heraus, m90 hatte Recht -- das war ein anderes Thema ganz. Ich werde Entsendung die Lösung, falls jemand läuft in das gleiche problem in der Zukunft.

    Meine Anwendung erstellt wurde, mit Redux, und das problem ergibt sich aus der Verwendung der darauf reagiert-redux-connect-Funktion zum anschließen einer Komponente an den Shop/global state. Aus irgendeinem Grund, den Export einer Komponente und den Anschluss an das speichern macht es möglich, den Zugriff auf die Funktionen im inneren. Um dies zu umgehen, musste ich alle entfernen, verwenden von globalen Zustand von Inhalten, so dass ich exportieren könnte es als "dumb" - Komponente.

    Mehr klar, Content.js sah so aus:

    var connect = require('react-redux').connect;

class Content extends React.Component {
  save() {
    //Get values from child fields
    //and save the content

    //Use of this.props.stateObject
  }
}

function mapStateToProps(state) {
  const {
    stateObject
  } = state;

  return {
    stateObject
  };
}

module.exports = connect(mapStateToProps)(Content);

    Entfernen Sie die Verwendung von globalen Zustand (und daher die Verwendung von Verbindung und mapStateToProps mir erlaubt, die Komponente exportieren mit:

    module.exports = Content;

    Zugriff auf diese.refs.Inhalt.save () - magisch gearbeitet, nachdem dies zu tun.

    • Möglicherweise möchten Sie dies als ein Problem für die redux-repo. Scheint, wie etwas, das behoben werden konnten.
    • Das macht Sinn, tatsächlich. Reagieren-Redux connect () - Funktion erstellt ein neues wrapper-Komponente um die von Ihnen tatsächlich selbst geschrieben hat. Die wrapper-Komponente nicht eine save () - Funktion, so dass die Ansatz wird nicht funktionieren. Sie sind wahrscheinlich besser mit der pass-down-a-callback-Ansatz in diesem Fall.
    • Die connect () - Funktion hat einen withRef Flagge für den Dritten parameter, der möglicherweise die Lösung für Ihr problem. Aber ehrlich gesagt, dass die übergeordnete Komponente aufrufen einer Methode auf Ihr Kind Komponente scheint eher anti-Reagieren.
    • Ich werde werfen Sie einen Blick auf die withRef flag, das David vorgeschlagen. Wenn die funktioniert, sehe ich keinen Grund, um dieses als redux Problem. Ansonsten werde ich gehen Sie vor und fügen Sie es hinzu. Vielen Dank für Eure Hilfe an alle!
    • -1: Sie können Referenzen und Zugriff auf ein-Komponenten-Funktion mit redux. Es ist nicht unmöglich, wie gesagt, in dieser Antwort. Menschen auf der Suche nach Antwort mit refs und redux und sehen diese Antwort wird missled. Wenn es eine gute Lösung zu verwenden refs in diesem Fall ist die andere Frage.
    • hat die Lösung unten.

    InformationsquelleAutor MKeller
Schreibe einen Kommentar