React Hooks - 在不直接访问 HTML 元素代码的情况下使用 useRef？

Question

使用 React，我在一个存储库中，HTML 元素从另一个存储库加载，我使用 pageLoaded 观察它。在 updateHeader 内部，只有更多 HTML 元素选择和 attribute/class 操作。

useEffect(() => {
        if (pageLoaded.status) {
            if (someCondition) {
                updateHeader(ubeName);
            } else {
                document.querySelector('.headerbar-menu').style.display = 'block';
                if (document.querySelector('.headerbar-menu.affiliates-wrapper')) {
                    document.querySelector('.headerbar-menu.affiliates-wrapper').style.display = 'none';
                }
            }
        }
    }, [pageLoaded.status])

这里的问题显然是我们不应该使用 querySelector，我认为它可能会导致一些意外的功能。元素不会正确评估和呈现，直到某些状态发生变化，即滚动状态处理程序，因此在初始页面加载时，元素不会显示其新属性，直到滚动。

我想尝试使用 useRef 进行解析，但无法直接访问 html。有没有办法在不访问 HTML 代码的情况下将 ref 动态连接到元素？

感谢您的时间和关注！

Answer 1

在我看来，最好的方法是按照以下顺序：

尝试select元素
如果 non-existant，设置一个 DOMSubtreeModified 事件处理程序或 MutationObserver
清理 DOMSubtreeModified 事件处理程序或 MutationObserver（或保留它以观察更新）

这允许以安全和现代的方式使用查询 selector，这不会偏离 React 的建议太远

React Hooks - 在不直接访问 HTML 元素代码的情况下使用 useRef？

React Hooks - Using useRef without direct access to HTML Element Code?

javascript

jsx

reactjs

react-hooks