componentDidMount VOR ref Rückruf genannt

ProblemcomponentDidMount VOR ref Rückruf genannt

Ich gründe eine reagieren ref eine Inline-Funktionsdefinition mit

render =() => { 
    return (
     <div className="drawer" ref={drawer => this.drawerRef = drawer}>

dann in componentDidMount der DOM-Referenz nicht gesetzt

componentDidMount =() => { 
    // this.drawerRef is not defined

Mein Verständnis ist der ref Callback sollte während mount, jedoch addi laufen ng console.log Aussagen offenbart componentDidMount heißt vor die Ref Callback-Funktion.

Weitere Codebeispiele ich zum Beispiel haben gesucht this discussion auf Github die gleiche Annahme anzuzeigen, sollte componentDidMountnach irgendwelchen ref Rückrufe in render definiert aufgerufen werden, es ist sogar stated in the conversation

So componentDidMount ist abgefeuert, nachdem alle Ref Callbacks ausgeführt wurden?

Ja.

ich reagieren mit 15.4.1

Etwas anderes Ich

versucht haben, die ref Funktion zu überprüfen genannt wurde, habe ich versucht, es auf die Klasse als solche definiert,

setDrawerRef = (drawer) => { 
    this.drawerRef = drawer; 
}

dann in render

<div className="drawer" ref={this.setDrawerRef}>

Console Logging in diesem Fall der Rückruf zeigt in der Tat nachcomponentDidMount

Quelle

2017-05-19 quickshiftin

Ich kann falsch liegen, aber wenn Sie Pfeil-Funktion für die Render-Methoden verwenden, wird es den Wert von "this" aus dem lexikalischen Bereich außerhalb Ihrer Klasse erfassen. Versuchen Sie, die Pfeilfunktionssyntax für Ihre Klassenmethoden loszuwerden und sehen Sie, ob es hilft. – Yoshi

das funktioniert gut für mich. Sind Sie sicher, dass Callback-Anrufe nach DidMount zurückgewiesen werden? Mach 2 Konsolen.Logs in beiden Funktionen und sehen, welche war zuerst – GProst

Ich benutze 15.5.4 React – GProst

-2

Versuchen gerufen wird Ihre Klasse erklärt wie ...

class YourClass extends Component { 
    render() {...same stuff you had...} 
    componentDidMount() {...same stuff you had...} 
}

denke ich, Ihre Klassendefinition staatenlos Komponente verwendet Definition und verursacht den Lebenszyklus nicht wie erwartet funktionieren. Ich bin ein wenig überrascht, dass componentDidMount() überhaupt aufgerufen wird, damit ich die Situation missverstehen kann.

Quelle

2017-05-19 16:50:11

ich, dass in der Frage erwähnt haben sollte;. die Komponente bereits als' Klasse Schublade erstreckt Komponente deklariert wird { ' – quickshiftin

Ah, ich missverstanden tatsächlich Ihre render() Code als eine Komponente def. Meine schlechte. –

In componentDidMount, finden Sie Ihr ref-Element (div.drawer) im Browser DOM? Wenn nicht, können Sie seine Referenz nicht haben. Da das Problem in einem anderen, größeren Code gefunden wird, könnte der Grund dafür sein, dass ref-Element (div.drawer) nicht gerendert wird.

Quelle

2017-05-28 06:49:27

Ich bin in ein ähnliches Problem zu laufen, und es scheint, als ob es keine Referenz zu diesem DOM in 'componentDidMount' gibt (obwohl es sein sollte) –

@Dave Lunny: vielleicht können Sie ein minimales Beispiel mit dem fehlenden ref teilen? –

componentDidMount VOR ref Rückruf genannt

Antwort

Verwandte Themen