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

Posted

技术标签:

【中文标题】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必须由用户自己确定 我会尝试在返回之前添加一个新变量,因此它将从用户那里获取颜色,或者如果未提供,则提供默认值。

以上是关于React - 如何使用上下文访问挂钩值的主要内容,如果未能解决你的问题,请参考以下文章

提交值时如何在 React 挂钩中使用回调函数?

如何在Redux中使用Auth0 JWT访问API?

如何在 React 函数组件(useState 挂钩)中访问 ag-Grid API?

反应上下文挂钩更新后如何触发功能

从 redux-saga 函数访问 React 上下文值

如何使用 React useRef 挂钩删除地图中的类