我希望在我的react.js组件上调用一个回调,当它的DOM元素(包括所有子节点)实际上已加载到页面上并准备就绪时.具体来说,我有两个组件,我想渲染相同的大小,选择具有较大自然大小的任何组件的最大值.
它看起来componentDidMount不是我真正想要的,因为每个组件只调用一次,但我希望在组件完成渲染时再次调用我的回调.我以为我可以onLoad向顶级DOM元素添加一个事件,但我想这只适用于某些元素,比如<body>和<img>.
bri*_*rns 45
看起来像是组合componentDidMount并将componentDidUpdate完成工作.第一个在初始渲染之后调用,当DOM可用时,第二个在任何后续渲染之后调用,一旦更新的DOM可用.在我的情况下,我都让他们委托一个共同的功能来做同样的事情.
Joh*_*ohn 41
在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
}
}
小智 18
的组合componentDidMount，并componentDidUpdate会得到与类组件的代码完成任务。但是如果你在全功能组件中编写代码the Effect Hook会做得很好，它与componentDidMountand相同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>
);
}
小智 6
我将componentDidUpdate应用于表以使所有列具有相同的高度.它与jquery中的$(window).load()相同.
例如:
componentDidUpdate: function() {
$(".tbl-tr").height($(".tbl-tr ").height());
}
小智 5
我发现，简单地将代码包装在componentDidMount或 中componentDidUpdate，setTimeout时间为 0 毫秒可确保浏览器 DOM 在执行setTimeout函数之前已使用 React 更改进行更新。
像这样：
componentDidMount() {
setTimeout(() => {
$("myclass") // $ is available here
}, 0)
}
这会将匿名函数放在 JS 事件队列中，以便在当前运行的 React 堆栈帧完成后立即运行。
| 归档时间： |
|
| 查看次数： |
108171 次 |
| 最近记录： |