React - 如何获取上下文中钩子的值

Question

我有一个 LessonThemes 组件。我使用了一个钩子，然后我使用 context 在 Test 组件中应用逻辑，问题是我不明白如何从hook 并将其应用到 context 中。 export const CounterContext = createContext ([ ]); 我需要在CounterContext 内应用值color

LessonThemes.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([]);

Lesson.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"/>