React -如何使用Context访问hook值

Question

我有一个LessonThemes组件，我想使用上下文访问color值。我有一个测试组件，我想在测试组件中导入LessonThemes组件，并使用React上下文访问测试组件中的颜色值，但是我怎么能不实现它呢?

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 />
}

Answer 1

不确定我是否得到了正确的，但使用上下文不是你应该在这里做的。上下文提供了一种在组件之间共享这些值的方法，而不必显式地在树的每个级别传递一个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';

另一方面，如果您想根据传递的颜色来组织主题，只需将其作为props传递即可。上下文需要一个更高级的层次，这是这里所缺少的。

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} />
}