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

Question

我有一个 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 />
}

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