componentDidMount wywołana przed ref zwrotnego

Question

problem

ja Ustawianie reakcji ref stosując definicję funkcję rolki

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

wówczas componentDidMount odniesienie DOM nie jest ustawiony

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

Rozumiem, że wywołanie zwrotne powinno być uruchamiane podczas montowania, jednak addi ng console.log oświadczenia ujawniają, że componentDidMount jest nazywane przed funkcją oddzwaniania zwrotnego.

Inne przykłady kodu szukałem na przykład this discussion na github wskazać samo założenie, componentDidMount powinien być nazywany po jakichkolwiek ref callbacków określonych w render, to nawet stated in the conversation

Więc componentDidMount jest zwolniony po wykonaniu wszystkich wywołań zwrotnych ref, które zostały wykonane ?

Tak.

Używam reagować 15.4.1

coś innego Próbowałem

Aby sprawdzić funkcję ref był nazywany, próbowałem go na definiowanie klasy jako takie

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

wówczas render

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

rejestrowania konsola w tym przypadku ujawnia zwrotna jest rzeczywiście miano pocomponentDidMount

Answer 1

Spróbuj deklarując swoją klasę jak ...

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

Myślę, że definicja klasy używa bezstanową komponent Definicja i powoduje, że cykl życia nie działa tak, jak można się spodziewać. Jestem trochę zaskoczony, że funkcja componentDidMount() jest w ogóle wywoływana, więc mogę źle zrozumieć sytuację.

Answer 2

W module componentDidMount, możesz znaleźć swój element ref (div.drawer) w DOM przeglądarki? Jeśli nie, nie możesz mieć odniesienia. Ponieważ problem występuje w innym, większym kodzie, przyczyną może być to, że element ref (div.drawer) nie jest renderowany.