在componentDidMount中添加加载侦听器

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

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

 componentWillUnmount() { 
   window.removeEventListener('load', this.handleLoad)  
 }

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

看起来componentDidMount和componentDidUpdate的组合可以完成这项工作。第一个函数在初始渲染之后调用，当DOM可用时，第二个函数在任何后续渲染之后调用，一旦更新的DOM可用。在我的例子中，我将它们都委托给一个公共函数来做同样的事情。

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

我对表应用了componentDidUpdate，使所有列的高度相同。它的工作原理与jquery中的$（window）.load（）相同。
例如：

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

我发现，只需在componentDidMount或componentDidUpdate中用时间为0毫秒的setTimeout Package 代码，就可以确保在执行setTimeout函数之前，浏览器DOM已经用React更改进行了更新。
就像这样：

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

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

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

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

componentDidMount(){
     this.try();
}

对我来说似乎起作用了

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

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

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

下面是我在尝试使用document.getElementsByClassName获取类之前等待DOM准备好的结果。我从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);
            }
     }

在下面的app.js [初始js文件]中添加以下代码，它将检测窗口刷新：

window.onload = () => {
      if (window.location.pathname != "/") {
        window.location = "/";
      }
    };

// const App = (props) => {