0

我有一个使用React Static构建的站点，该站点具有始终存在的 Header 组件。根据当前页面是否有 hero 组件，Header 应该是浅色或深色。

Header 在路由之外渲染，并useEffect在子渲染之前触发。这可能是因为路由。

这是当前代码：

// 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>
    );
}

将呈现的<Routes default />是在 React Static 中配置的静态页面static.config.js。

下面是 Hero 组件的示例：

// Hero.js
import React from "react";

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

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

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

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

尽管 Hero 在路由器中而 Header 不在，但我怎么能以某种方式从 Header 中检测到 Hero 的存在？这感觉像是一个很常见的用例，但我在互联网上找不到任何信息。

提前致谢！

4

1 回答 1

0

所以我最终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>
    );
}

// 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);

这提供了设置和获取标题主题的全局访问权限，这可能不是可选的，但它现在可以工作，我认为这很好。请让我知道是否有更好的方法来做到这一点。

于 2020-02-03T08:19:51.233 回答