当我的 react.js 组件的 DOM 元素（包括所有子节点）实际加载到页面上并准备就绪时，我想在我的 react.js 组件上调用回调。具体来说，我有两个组件要渲染相同的大小，选择具有较大自然大小的组件中的最大值。
看起来componentDidMount并不是我真正想要的，因为每个组件只调用一次，但我希望在组件完成渲染时再次调用我的回调。我以为我可以onLoad向顶级 DOM 元素添加一个事件，但我想这仅适用于某些元素，例如<body>和<img>。
在 react.js 中加载 DOM 时的回调
IT技术
reactjs
2021-04-06 06:04:41
6个回答
在 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
}
}
看起来像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());
}
我发现，简单地将代码包装在componentDidMount或 中componentDidUpdate，setTimeout时间为 0 毫秒，可确保浏览器 DOM 在执行setTimeout函数之前已使用 React 更改进行更新。
像这样：
componentDidMount() {
setTimeout(() => {
$("myclass") // $ is available here
}, 0)
}
这会将匿名函数放在 JS 事件队列上，以便在当前运行的 React 堆栈帧完成后立即运行。