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

Posted 2023-02-23

【中文标题】React - 如何获取上下文中钩子的值

【英文标题】：React - How to get the value of the hooks inside the context

【发布时间】：2021-04-28 20:46:14

【问题描述】：

我有一个 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>
    );

【问题讨论】：

你可以使用useContext

createContext([]); 创建一个上下文，如果没有提供者位于 React 组件树中的消费者之上，则传递给它的参数是默认值。 <CounterContext.Provider value=[color, setColor]> 为出现在其下方组件树中的任何使用者提供CounterContext（提供的值与提供给 Provider value 属性的值相同）。当同一上下文的多个提供者出现在组件树中时，使用最相关的上下文（组件树中最近的提供者）。

【参考方案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"/>

【讨论】：

让我演示我的测试组件，我试图在 jsx 中应用颜色值，我已经编辑了我的问题，你可以查看测试组件

该组件是否在任何 CounterContext.Provider 下？ React 将尝试在您的 Test 组件上方的树中找到一个。否则它将使用来自createContext的初始值。

这是问题所在，我试图在 Test 组件中导入 LessonThemes 组件，反之亦然