React - 如何使用上下文访问挂钩值

Posted 2023-04-14

【中文标题】React - 如何使用上下文访问挂钩值

【英文标题】：React - How to access hook value using Context

【发布时间】：2021-04-28 13:26:06

【问题描述】：

我有一个 LessonThemes 组件，我想使用 Context 访问 color 值。我有一个 Test 组件，我想在 Test 组件中导入 LessonThemes 组件，并使用 React Context 访问 Test 组件中的颜色值，但是我怎么不能实现呢。

LessonThemes.jsx

import React,  useState, useEffect  from "react";

export default function LessonThemes() 
    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 (
        <>
            
                themes.map((theme, index) => 
                    return (
                        <label key=index>
                            <input
                                onChange=() => SideBarPageContent(theme.color)
                                type="radio"
                                name="background"
                            />theme.name</label>
                    );
                )
            
        </>
    );

Test.jsx

export default function Test(props) 
   return <LessonThemes />

【参考方案1】：

不确定我是否理解正确，但使用 Context 不是你应该在这里做的。 Context 提供了一种在组件之间共享此类值的方法，而无需通过树的每一层显式传递一个 prop。

我建议在这里创建一个变量颜色，您将在需要时导出、导入和调用（在您的代码中设置为钩子，但它没有被用作它）。

类似的东西 Colors.jsx

export default const colors = () => [
         name: "G", color: "green" ,
         name: "R", color: "red" ,
         name: "B", color: "blue" ,
];

然后 Test.jsx

import colors from './Colors';

另一方面，如果您想根据传递的颜色组织主题，只需将其作为道具传递。上下文需要这里缺少的更高级别。

LessonThemes.jsx

import React,  useState, useEffect  from "react";

export default function LessonThemes(color = localStorage.getItem("color")) 

在 Test.js

中

export default function Test(props) 
   const color = localStorage.getItem("color") || 'green';
   return <LessonThemes color=color />

【讨论】：

我已经更新了答案，让我知道第二部分是否符合需要:)

我更喜欢第二个选项 :) 只有在测试组件中出现“'color' is not defined”的错误

什么样的逻辑会设置第一个颜色？是用户偏好吗？或者它是由其他变量定义的？ color 应该首先使用该值填充，以便 LessonThemes 可以正常工作。

不行，一开始color是不确定的，color必须由用户自己确定

我会尝试在返回之前添加一个新变量，因此它将从用户那里获取颜色，或者如果未提供，则提供默认值。