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 - 如何使用上下文访问挂钩值的主要内容,如果未能解决你的问题,请参考以下文章