等待DOM元素，然后使用react - Reactjs
等待DOM元素，然后使用react - Reactjs
提问于 2020-08-21 16:47:41
您好，我有一个如下所示的类组件：
class SomeComponent extends Component {
componentDidMount = () => {
const divElement = document.getElementbyId('id'); // this element could take a few seconds to load
if (props.something1 && props.something2) {
..do something with divElement's width
}
}
render() {
return ....
}
}我想等到加载了divElement，或者在加载divElement时触发一个事件，这样我以后就可以进行计算了。我尝试添加了setTimeout，但没有起作用
回答 5
Stack Overflow用户
发布于 2020-08-21 16:53:46
给你两个答案：
使用ref (如果您的组件呈现元素)
如果元素是由组件呈现的，请使用ref。
使用MutationObserver (如果元素在React之外)
如果元素完全在页面的React部分之外，我会像您一样用getElementById查找它，如果找不到，请使用MutationObserver等待添加。不要忘记删除componentWillUnmount中的突变观察者。
它看起来像这样：
componentDidMount = () => {
const divElement = document.getElementbyId('id');
if (divElement) {
this.doStuffWith(divElement);
} else {
this.observer = new MutationObserver(() => {
const divElement = document.getElementbyId('id');
if (divElement) {
this.removeObserver();
this.doStuffWith(divElement);
}
});
this.observer.observe(document, {subtree: true, childList: true});
}
}
componentWillUnmount = () => {
this.removeObserver();
}
removeObserver = () => {
if (this.observer) {
this.observer.disconnect();
this.observer = null;
}
}(您可能需要对此进行调整，因为它是现成的；有关详细信息，请参阅MutationObserver文档。)
Stack Overflow用户
发布于 2020-08-21 16:56:06
这是一个愚蠢的解决方案，但它完成了自己的工作：
const getElementByIdAsync = id => new Promise(resolve => {
const getElement = () => {
const element = document.getElementById(id);
if(element) {
resolve(element);
} else {
requestAnimationFrame(getElement);
}
};
getElement();
});要使用它：
componentDidMount = async () => {
const divElement = await getElementByIdAsync('id');
if (props.something1 && props.something2) {
// ..do something with divElement's width
}
}Stack Overflow用户
发布于 2020-08-21 16:51:41
你可以这样做：
componentDidMount() {
// Triggering load of some element
document.querySelector("#id").onload = function() {
// Write your code logic here
// code here ..
}
}
参考https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63519548
复制相关文章
相似问题
腾讯云开发者
