Question

我希望在我的react.js组件上调用一个回调，当它的DOM元素（包括所有子节点）实际上已加载到页面上并准备就绪时。具体来说，我有两个组件要呈现相同的大小，选择具有较大自然大小的任何组件的最大值。

看起来componentDidMount并不是我想要的，因为每个组件只调用一次，但我希望在组件完成渲染时再次调用我的回调。我想我可以在顶级DOM元素中添加onLoad事件，但我想这只适用于某些元素，例如<body>和<img>。

Answer 1

看起来componentDidMount和componentDidUpdate的组合可以完成工作。第一个在初始渲染之后调用，当DOM可用时，第二个在任何后续渲染之后调用，一旦更新的DOM可用。就我而言，我都让他们委托一个共同的功能来做同样的事情。

Answer 2

在componentDidMount

中添加onload侦听器

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
 }
}

Answer 3

componentDidMount和componentDidUpdate的组合将在具有类组件的代码中完成工作。但是，如果您要用全部功能组件编写代码，the Effect Hook会做得很好，它与componentDidMount和componentDidUpdate一样。

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

https://reactjs.org/docs/hooks-effect.html

Answer 4

我将componentDidUpdate应用于表，使所有列的高度相同。它与jquery中的$（window）.load（）相同。

例如：

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

Answer 5

在现代浏览器中，它应该像

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

componentDidMount(){
     this.try();
}

Answer 6

我发现，只需将代码包装在具有0毫秒时间的setTimeout的componentDidMount或componentDidUpdate中，可以确保在执行setTimeout函数之前，已使用React更改来更新浏览器DOM。

赞：

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

这会将匿名函数放在JS事件队列中，以便在当前运行的React堆栈框架完成后立即运行。

Answer 7

下面是我想在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);
            }
     }

Answer 8

您可以使用useRef钩子来监视容器元素。请注意，您需要特别注意ref的{{1}}值，否则它将不起作用。

示例：

current

Answer 9

似乎对我有用

const [isLoaded, setIsLoaded] = useState(false);
const [isPageLoaded, setIsPageLoaded] = useState(false); //this helps

useEffect(() => {
    setIsLoaded(true);
}, []);

useEffect(() => {
    if (isLoaded) {
        setIsPageLoaded(true);
    }
}, [isLoaded]);

在react.js中加载DOM时的回调

9 个答案: