Javascript React-如何导入钩子值

我有一个LessonThemes组件，它允许您在复选框之间切换并更改块的颜色，问题是当在测试组件内导入组件时，我不太了解如何获取

颜色

值以在测试组件内应用它

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

import React from "react";

export default function Test(props) {

    return (
       <div style={{background: color}}>
          <LessonThemes />
       </div>
    );
}

---

请注意代码行

style={{background:color}}

此代码不起作用，我只想说明我想要达到的结果以及如何获得

color
的值。我认为您可以通过执行以下任一操作来解决您遇到的问题：

正确设置父关系和子关系。如果代码来自：
应用程序>课程主题>课程>测试
然后，您可以将道具从课程主题传递到课程，再传递到测试
使用管理颜色的全局变量，并在课程主题中设置该变量，然后在测试组件中使用该变量
这是一个非常好的主意，LessonThemes组件只在测试组件中使用。如果这个组件没有在测试组件之外的任何地方使用，你认为使用React上下文值得吗？那么我就不必费心设置React上下文，只需确保有正确的父级>子级设置，并将颜色作为道具传递下去。祝你一切顺利。