0

常に存在するヘッダー コンポーネントを持つReact Staticで構築されたサイトがあります。現在のページにヒーロー コンポーネントがあるかどうかに応じて、ヘッダーは明るい色または暗い色のいずれかになります。

ヘッダーはルートの外側でレンダリングされ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.

ヒーローはルーターにあり、ヘッダーはそうではありませんが、どうすればヘッダーからヒーローの存在を検出できますか? これは非常に一般的な使用例のように感じますが、インターウェブに関する情報は見つかりませんでした。

前もって感謝します！

4

1 に答える 1

0

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

これにより、ヘッダー テーマを設定および取得するためのグローバル アクセスが可能になります。これはオプションではないかもしれませんが、今のところ機能しており、問題ないと思います。これを行うより良い方法があれば教えてください。

于 2020-02-03T08:19:51.233 に答える