Oddzwonienie, gdy DOM jest załadowany w pliku react.js

Chcę wywołać wywołanie zwrotne na moim komponencie react.js, gdy element DOM (w tym wszystkie węzły podrzędne) jest faktycznie załadowany na stronę i gotowy. W szczególności mam dwa komponenty, które chcę renderować w tym samym rozmiarze, wybierając maksimum któregokolwiek komponentu ma większy naturalny rozmiar.Oddzwonienie, gdy DOM jest załadowany w pliku react.js

Wygląda na to, że componentDidMount tak naprawdę nie jest tym, czego potrzebuję, ponieważ jest wywoływany tylko raz dla każdego komponentu, ale chcę, aby moje wywołanie zwrotne było ponownie wywoływane za każdym razem, gdy komponent zakończy renderowanie. Pomyślałem, że mogę dodać zdarzenie onLoad do elementu DOM najwyższego poziomu, ale myślę, że dotyczy tylko niektórych elementów, takich jak <body> i <img>.

Źródło

2014-09-26 brianmearns

Wygląda na to, że połączenie componentDidMount i componentDidUpdate spowoduje wykonanie zadania. Pierwszy jest wywoływany po wstępnym renderowaniu, gdy DOM jest dostępny, drugi jest wywoływany po każdym kolejnym renderowaniu, gdy zaktualizowany DOM jest dostępny. W moim przypadku obie mam ich delegatów do wspólnej funkcji, aby zrobić to samo.

Źródło

2014-09-26 12:50:23 brianmearns

Zastosowałem componentDidUpdate do tabeli, aby wszystkie kolumny miały taką samą wysokość. działa tak samo jak w $ (window) .load() w jquery.

componentDidUpdate: function() { 
     $(".tbl-tr").height($(".tbl-tr ").height()); 
    }

Źródło

2016-03-31 23:34:04

Niestety, 'componentDidUpdate' nie jest wywoływana przez początkowy render, więc twoja funkcja nie zostanie zastosowana, dopóki rekwizyty lub stan nie zostaną zmienione_: https://reactjs.org/docs/react-comp onent.html # componentdidupdate – brianmearns

Dodaj onload słuchacza w componentDidMount

class Comp1 extends React.Component { 
constructor(props) { 
    super(props); 
    this.handleLoad = this.handleLoad.bind(this); 
} 

componentDidMount() { 
    window.addEventListener('load', this.handleLoad); 
} 

handleLoad() { 
    $("myclass") // $ is available here 
} 
}

Źródło

2017-05-02 13:34:09 John

W nowoczesnych przeglądarkach, powinna ona być jak

try() { 
    if (!$("#element").size()) { 
     window.requestAnimationFrame(try); 
    } else { 
     // do your stuff 
    } 
}; 

componentDidMount(){ 
    this.try(); 
}

Źródło

2018-02-14 11:25:50 pihyper

heh, z wyjątkiem nowoczesnych przeglądarek nie używaj jquery = P. Jest to dobra wskazówka dotycząca używania ramki animacji, zakładając, że powinna ona być aktualizowana na żywo. – brianmearns

Oddzwonienie, gdy DOM jest załadowany w pliku react.js

Odpowiedz

Powiązane problemy