0

我正在通过插件在页面中呈现一些反应内容,因此我无法控制使用我的内容的父页面。问题是有时我使用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 });
                }
            }
        }
    };

4

0 回答 0