我希望在我的 react.js 组件的 DOM 元素（包括所有子节点）实际加载到页面上并准备就绪时调用回调。具体来说，我有两个组件要呈现相同的大小，选择具有较大自然大小的组件中的最大值。
看起来componentDidMount 并不是我真正想要的，因为它每个组件只调用一次，但我希望在组件完成渲染时再次调用我的回调。我以为我可以将 onLoad 事件添加到顶级 DOM 元素，但我想这仅适用于某些元素，例如 <body> 和 <img>。
【问题讨论】：
标签： reactjs
在componentDidMount中添加onload监听
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
}
}
【讨论】：
componentWillUnmount() { window.removeEventListener('load', this.handleLoad) }
看起来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>
);
}
【讨论】：
我将 componentDidUpdate 应用于表格以使所有列的高度相同。它的工作原理与 jquery 中的 $(window).load() 相同。
例如：
componentDidUpdate: function() {
$(".tbl-tr").height($(".tbl-tr ").height());
}
【讨论】：
componentDidUpdate 不会被调用来进行初始渲染，因此在道具或状态更改之前不会应用您的函数：reactjs.org/docs/react-component.html#componentdidupdate
我发现，只需在 componentDidMount 或 componentDidUpdate 中使用 setTimeout 包装代码，时间为 0 毫秒，可确保浏览器 DOM 在执行 setTimeout 之前已使用 React 更改进行更新功能。
像这样：
componentDidMount() {
setTimeout(() => {
$("myclass") // $ is available here
}, 0)
}
这会将匿名函数放在 JS 事件队列中，以便在当前运行的 React 堆栈帧完成后立即运行。
【讨论】：
在现代浏览器中，应该是这样的
try() {
if (!$("#element").size()) {
window.requestAnimationFrame(try);
} else {
// do your stuff
}
};
componentDidMount(){
this.try();
}
【讨论】：
您可以使用useRef 挂钩来查看您的容器元素。
注意，需要特别注意ref的current值，否则不起作用。
例子：
const containerRef = useRef();
const { current } = containerRef;
useEffect(setLinksData, [current]);
return (
<div ref={containerRef}>
// your child elements...
</div>
)
【讨论】：
下面是我在尝试使用 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);
}
}
【讨论】：
似乎对我有用
const [isLoaded, setIsLoaded] = useState(false);
const [isPageLoaded, setIsPageLoaded] = useState(false); //this helps
useEffect(() => {
setIsLoaded(true);
}, []);
useEffect(() => {
if (isLoaded) {
setIsPageLoaded(true);
}
}, [isLoaded]);
【讨论】：