Was ist die richtige proptype für einen ref in Reagieren?

Ich bin die Speicherung einer ref in meiner redux speichern und mit mapStateToProps machen, dass das ref für die Komponenten, die Zugriff darauf benötigen.

Ref gespeichert ist, sieht wie folgt aus:

ref={node => this.myRefToBePutInReduxGlobalStore = node}

Was ist die richtige propType für das ref?

  • Weil die refs sind nicht serialisierbar, es ist nicht eine gute Idee, auf die Sie in der Redux-Shop. Dennoch, der Wert übergeben ref prop ist eine Funktion das erste argument eine Referenz auf das DOM-element oder null. Es ist eine Funktion,.
  • Sie können nicht verwenden propType für refs, aber Sie können es verwenden, für props. Da Sie auf der Durchreise sind es wieder einmal speichern, dann wird es dargestellt als eine prop wie this.props.myRefToBePutInReduxGlobalStore. myRefToBePutInReduxGlobalStore sollte die Art der Knoten, so PropTypes.node sollte für Sie arbeiten
  • Ich denke, es sollte PropType.object weil ref ist im Grunde genommen Klasse-Instanz-Objekt ist. Daher, wenn Sie pass-ref-element wie ein Requisiten es wäre der Objekt-Typ
InformationsquelleAutor danday74 | 2017-12-28
  1. 36

    Antwort auf die Problematik beschrieben, die in der ursprünglichen post

    In der OP-Frage, es ist nicht der tatsächliche ref Stütze geben, die definiert werden muss, aber das resultierende element zeigte der ref.

    In diesem Fall, prop geben sollte:

    myRefToBePutInReduxGlobalStore: PropTypes.instanceOf(Element)

    (Obwohl, ich würde es umbenennen myNodeToBePutInReduxGlobalStore und Stimmen darin überein, dass es ist nicht eine gute Praxis zu legen, die nicht-serialisierbare Daten innerhalb redux-Shop, wie erklärt, in der Redux-FAQ)

    Hinweis: Sprung nach unten Antwort für einen Kommentar zu server-side use-case -

    Antwort auf die eigentliche Frage

    In der anderen hand, wenn Sie wirklich wollen, zu erzwingen der Art einer tatsächlichen ref, zum Beispiel eine requisite, die an eine andere Komponente ref, Sie gestatten, sowohl auf das Objekt geprägt durch React.createRef() (Die bevorzugte Weg, zu erstellen, ref in, Reagieren die Komponenten, sehen, geben Sie reagieren-code hier) und function Arten.

    1. Objekt Form: PropTypes.shape({ current: PropTypes.instanceOf(Element) }) ist für refs erstellt mit React.createRef()
    2. PropTypes.func ist für callback-refs wie in der obigen Frage

    Welche gibt die folgenden PropType definition:

    forwardRef: PropTypes.oneOfType([
  PropTypes.func, 
  PropTypes.shape({ current: PropTypes.instanceOf(Element) })
])

    Hinweis über server-side-rendering

    Wenn Ihr code mit prop-Typen auf dem server läuft, sofern Sie nicht bereits polyfill DOM-Umgebung Element undefiniert in NodeJS. Sie können die folgenden shim um ihn zu unterstützen:

    Element = typeof Element === 'undefined' ? function(){} : Element

    Weitere details finden Sie in den Kommentaren (Danke @Rahul Sagore)

    Edit: Hinzugefügt bestimmten Form der Objekt-PropType wie erwähnt von @Ferenk Kamras

    • Es gibt Element definiert ist, nicht auf server-side-rendering. Eine Lösung für das?
    • Guter Punkt. Was über diese shim: Element = typeof Element === 'undefined' ? function(){} : Element (vorgeschlagen von Ryan Florenz in einigen github issue). Wenn es für Sie arbeitet, kann ich hinzufügen, dass es auf meine Antwort.
    • Ich dachte, es aus und fügte hinzu, diese if (!isBrowser) { global.Element = null; }. Arbeitete für mich. isBrowser = typeof window !== 'undefined';
    InformationsquelleAutor Pandaiolo
  2. 8

    Ich nur prüfen, für die der bevorzugte Weg, und da PropType.Objekt ist nicht sehr wertvoll, ich landete mit diesem:

    PropTypes.shape({ current: PropTypes.instanceOf(Element) })
    InformationsquelleAutor Ferenc Kamras
Schreibe einen Kommentar