Javascript 如何检测文档中是否存在其他组件？

我有一个网站，它有一个标题组件，总是存在。根据当前页面是否包含hero组件，标题应为浅或深

标题在路由之外呈现，并且在呈现子级之前触发

useffect

。这可能是因为路由问题

这是当前代码：

// App.js
import React, { useState, useEffect } from 'react'
import { Root, Routes } from 'react-static'

export default () => {

    const [useDarkTheme, setUseDarkTheme] = useState(false);

    useEffect(() => {
        if (typeof document !== "undefined") {
            const heroPresent = document.querySelectorAll(".o-hero").length > 0;
            console.log("The hero is present: " + heroPresent);
            setUseDarkTheme(!heroPresent);
        }
    })

    return (
        <Root>
            <React.Suspense fallback={ <em>Loading...</em> }>
                <Header useDarkTheme={ useDarkTheme } />
                <Routes default />
            </React.Suspense>
        </Root>
    );
}

当我运行应用程序并查看日志时，我得到的是：

The hero is present: false
This is the Hero rendering. If this exist, the Header should be dark.

尽管英雄在路由器中，而头部不在路由器中，但我如何从头部检测到英雄的存在？这感觉像是一个非常常见的用例，但我在互联网站上找不到任何信息

---

提前谢谢

因此，我最终使用

useContext

为所有子级提供标题主题的getter和setter（暗或亮）。这个解决方案的灵感来源于。解决方案如下所示：

// App.js
import React, { useState, useContext } from 'react'
import { Root, Routes } from 'react-static'
import { HeaderThemeContext } from "./context";

export default () => {

    const { theme } = useContext(HeaderThemeContext);
    const [headerTheme, setHeaderTheme] = useState(theme);

    return (
        <Root>
            <React.Suspense fallback={ <em>Loading...</em> }>
                <HeaderThemeContext.Provider value={ { theme: headerTheme, setTheme: setHeaderTheme } }>
                    <Header theme={ headerTheme } />
                    <Routes default />
                </HeaderThemeContext.Provider>
            </React.Suspense>
        </Root>
    );
}

---

这提供了全局访问设置和获取标题主题的权限，这可能不是可选的，但它现在可以工作了，我认为这很好。如果有更好的方法，请告诉我

你可以尝试超时。。。但事实上，它需要的是

useContext

——它不是关于检测，而是关于communication@xadm是的，超时确实有效，但不是IMHO的最佳解决方案。我从来没有听说过useContext，我会查一下的！Thanks@xadm通过使用这种方法，我最终使用了

useContext

方法：而且效果很好。如果你愿意，你可以写下你的评论作为回答，我会接受。你可以回答你自己的问题，如果可以改进，我们可以发表评论

// App.js
import React, { useState, useContext } from 'react'
import { Root, Routes } from 'react-static'
import { HeaderThemeContext } from "./context";

export default () => {

    const { theme } = useContext(HeaderThemeContext);
    const [headerTheme, setHeaderTheme] = useState(theme);

    return (
        <Root>
            <React.Suspense fallback={ <em>Loading...</em> }>
                <HeaderThemeContext.Provider value={ { theme: headerTheme, setTheme: setHeaderTheme } }>
                    <Header theme={ headerTheme } />
                    <Routes default />
                </HeaderThemeContext.Provider>
            </React.Suspense>
        </Root>
    );
}

// Hero.js
import React from "react";
import { headerThemes, setHeaderTheme } from "./context";

export default () => {
    setHeaderTheme(headerThemes.DARK); 

    console.log("This is the Hero rendering. If this exist, the Header should be dark.");

    return (
        <div className="o-hero">
            <p>Hero!</p>
        </div>
    );
}

// context.js
import React, { createContext, useContext } from "react";

export const headerThemes = {
    LIGHT: "light",
    DARK: "dark",
};

export const HeaderThemeContext = createContext({
    theme: headerThemes.LIGHT,
    setTheme: () => {}
});

// This is a hook and can only be used in a functional component with access to the HeaderThemeContext.
export const setHeaderTheme = theme => useContext(HeaderThemeContext).setTheme(theme);