Обратный вызов, когда DOM загружается в response.js

Я хочу, чтобы обратный вызов вызывался в моем компоненте response.js, когда элемент DOM (включая все дочерние узлы) фактически загружается на страницу и готов. В частности, у меня есть два компонента, которые я хочу отобразить одинаковый размер, выбирая максимум того, какой компонент имеет больший естественный размер.

Похоже, что componentDidMount не то, что я хочу, потому что он вызывается только один раз для каждого компонента, но я хочу, чтобы мой обратный вызов вызывался снова в любое время, когда компонент завершил рендеринг. Я думал, что добавить элемент onLoad к элементу DOM верхнего уровня, но, я думаю, это применимо только к некоторым элементам, таким как <body> и <img>.

Ответ 1

Похоже, что комбинация componentDidMount и componentDidUpdate выполнит свою работу. Первый вызывается после первоначального рендеринга, когда DOM доступен, второй вызывается после любых последующих визуализаций, как только обновленная DOM доступна. В моем случае, я оба им делегировать на общую функцию, чтобы сделать то же самое.

Ответ 2

Добавить прослушиватель onload в 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
 }
}

Ответ 3

Я применил componentDidUpdate для таблицы, чтобы иметь все столбцы одинаковой высоты. он работает так же, как на $(window).load() в jquery.

например:

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

Ответ 4

В современных браузерах это должно быть похоже на

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

componentDidMount(){
     this.try();
}

Ответ 5

Я обнаружил, что простая упаковка кода в componentDidMount или componentDidUpdate с setTimeout со временем 0 миллисекунд гарантирует, что DOM браузера был обновлен с изменениями React перед выполнением функции setTimeout.

Вот так:

componentDidMount() {
    setTimeout(() => {
        $("myclass") //  $ is available here
    }, 0)
}

Это помещает анонимную функцию в очередь событий JS для запуска сразу после завершения текущего работающего фрейма стека React.

Ответ 6

Ниже приведено то, что я придумал, чтобы дождаться, когда DOM будет готов, прежде чем пытаться получить класс, используя document.getElementsByClassName. Я вызвал эту функцию из метода жизненного цикла componentDidMount().

     changeIcon() {
            if (
                document.getElementsByClassName('YOURCLASSNAME')
                    .length > 0 &&
                document.getElementsByClassName('YOURCLASSNAME').length > 0
            ) {
                document.getElementsByClassName(
                    'YOURCLASSNAME'
                )[0].className = 'YOUR-NEW-CLASSNAME';
                document.getElementsByClassName(
                    'YOUR-OTHER-EXISTING-CLASSNAME'
                )[0].style.display = 'block';
            } else {
                setTimeout(this.changeIcon, 500);
            }
     }