我正在通过插件在页面中呈现一些反应内容,因此我无法控制使用我的内容的父页面。问题是有时我使用componentDidMount
生命周期滚动到页面中的特定元素。
在某些情况下,当页面加载时,父页面正在使用模态以获得同意(RGPD 模态),因此我的内容正在正确加载并且我componentDidMount
和我的滚动方法正在运行。除了呈现此模式的页面阻止滚动。即使模式关闭,我的函数也已经运行,因此它不会滚动。
我考虑过听一些更改,MutationObserver
但它不会使其保持一致,因为有多个“父母”可以渲染我的内容,以便MutationObservers
设置许多不同的内容。
我还考虑了另一种生命周期方法,可以检测我的内容是否被部分渲染或其他内容阻止。
我根本不知道如何解决这个问题。
这是一些代码:
componentDidMount = () => {
if (typeof window !== "undefined") {
const pageAnchor = window.location.hash.slice(1);
const argumentRegex = /argument_\d+/;
const argumentAnchor = pageAnchor.match(argumentRegex);
if (argumentAnchor) {
const argumentId = this.getId();
if (argumentAnchor[0] === argumentId) {
scroller.scrollTo(argumentId, { duration: 1000, smooth: false, offset: -80 });
}
}
}
};