React - 如何獲取上下文中鈎子的值

Question

我有一個課程主題組件。 我使用了一個鈎子，然后我使用上下文在Test組件中應用邏輯，問題是我不明白如何從鈎子中獲取color值並將其應用到上下文中。 export const CounterContext = createContext ([ ]); 我需要在CounterContext中應用值color

課程主題.jsx

import React, {useState, useEffect, createContext} from "react";
import ThemeContext from "./ThemeContext";

export default function LessonThemes(props) {
    const [color, setColor] = useState(localStorage.getItem("color"));

    const [themes, setThemes] = useState([
        { name: "G", color: "green" },
        { name: "R", color: "red" },
        { name: "B", color: "blue" },
    ])

    useEffect(() => {
        localStorage.setItem("color", color);
    })

    const SideBarPageContent = (SideBarPageContentBackground) => {
        localStorage.setItem('color', SideBarPageContentBackground);
        setColor(SideBarPageContentBackground);
    }

    return (
        <CounterContext.Provider value={[color, setColor]}>
            {
                themes.map((theme, index) => {
                    return (
                        <label key={index}>
                            <input
                                onChange={() => SideBarPageContent(theme.color)}
                                type="radio"
                                name="background"
                            />{theme.name}</label>
                    );
                })
            }
        </CounterContext.Provider>
    );
}

export const CounterContext = createContext([]);

課程.js

import React, { useContext } from "react";
import "./css/Sidebar.css";

export default function Test(props) {
    const [color] = useContext(CounterContext);

    return (
        <div className="page-wrapper chiller-theme toggled">
            <LessonThemes />
            <div style={{background: color}}>
                <i className="fas fa-bars"></i>
            </div>
        </div>
    );
}

Answer 1

您的操作方式似乎沒有任何問題，但尚不清楚您需要如何使用該Context.Provider 。

我假設您已經制作了一個功能最少的示例，因為從您的示例代碼中，首先不需要Context存在，因為您沒有在上下文提供程序“下”呈現任何組件。

這就是您從嵌套組件中使用它的方式。 即： <YourContext.Provider/>下的一個組件。

 const CounterContext = React.createContext([]); function LessonThemes(props) { const [color, setColor] = React.useState("initialColor"); const [themes, setThemes] = React.useState([ { name: "G", color: "green" }, { name: "R", color: "red" }, { name: "B", color: "blue" }, ]) const inputItems = themes.map((theme,index) => ( <React.Fragment> <label key={index}> <input onChange={() => setColor(theme.color)} type="radio" name="background" /> {theme.name} </label> </React.Fragment> )); return ( <CounterContext.Provider value={[color, setColor]}> {inputItems} <NestedComponent/> </CounterContext.Provider> ); } // NESTED COMPONENT THAT WILL CONSUME THE CONTEXT function NestedComponent() { const [color,setColor] = React.useContext(CounterContext); return( <div> <div>I am NestedComponent</div> <div><b>color:</b>{color}</div> </div> ); } ReactDOM.render(<LessonThemes/>, document.getElementById("root"));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script> <div id="root"/>