javascript - React - 如何使用上下文从对象中应用多个值

问题描述

为此，我在我的项目中使用了一个颜色主题，我使用了一个 React 上下文来传递几个组件中的值，一切对我来说都很好，直到我决定在对象中添加另一个属性以便将不同的颜色应用于不同的组件，因为例如ThemeBackground，将绿色作为值的属性将应用于RoutesPage组件，而将橙色作为侧属性将应用于SideBar组件。问题是我无法side为组件应用属性SideBar，我尝试了几个选项，但我现在没有成功，我将在图片中更详细地向您展示所有内容，以便您清楚地了解问题，然后我会提供给您用代码

请注意，该ThemesBackground属性已成功应用于内容，但问题是我想在我为side侧边栏导入ThemeBackground属性时将该属性应用到我的侧边栏，因此我的侧边栏应用红色，但我认为您已经理解了短属性的问题ThemeBackground应该应用于side侧边栏的内容和属性

课程主题.jsx

import React, { useState, useEffect, createContext } from "react";
import SideBar from "./SideBar";
import RoutesPage from "../pages/Routes";

export const CounterContext = createContext(["color"]);


export default function LessonThemes(props) {
    const [BackgroundTheme, SetBackgroundTheme] = useState(localStorage.getItem("color"));

    const [themes, setThemes] = useState([
        { name: "G", ThemeBackground: "maroon", side: "orange" },
        { name: "R", ThemeBackground: "red", side: "aqua"  },
        { name: "B", ThemeBackground: "blue", side: "pink"  },
    ])

    useEffect(() => {
        localStorage.setItem("color", BackgroundTheme);
    })

    const SideBarPageContent = (SideBarPageContentBackground) => {
        localStorage.setItem('color', SideBarPageContentBackground);
        SetBackgroundTheme(SideBarPageContentBackground);
    }

    const list = themes.map((theme, index) => {
        return (
            <label key={index}>
                <input
                    onChange={() => SideBarPageContent(theme.ThemeBackground)}
                    type="radio"
                    name="background"
                />{theme.name}</label>
        );
    })

    return (
        <CounterContext.Provider value={[BackgroundTheme, SetBackgroundTheme]}>
            <SideBar list={list} {...props} />
            <RoutesPage path={props.match} />
        </CounterContext.Provider>
    );
}

侧边栏.jsx

import React from 'react';
import {CounterContext} from "./LessonThemes";
import SideBarMenu from "./SideBarMenu";
import '../css/Sidebar.css'

export default function SideBar(props) {
    const [BackgroundTheme, SetBackgroundTheme] = React.useContext(CounterContext);
    return (
        <div className="wrappers">
            <nav id="sidebar" className="sidebar-wrapper modal">
                <div style={{background: BackgroundTheme}} className={"sidebar-page-content"}>
                    <div className="sidebar-brand">
                        <div className="sidebar-brand-container">
                            <div>
                                {props.list}
                            </div>
                            <div>
                                <span href="#">Theme</span>
                            </div>
                        </div>
                    </div>

                    <div className="sidebar-menu">
                        <SideBarMenu path={props.match.path}/>
                    </div>

                    ...
                </div>
            </nav>
        </div>
    );
}

我不知道它是否对您有用，但除此之外我想演示该RoutesPage组件，尽管一切都井井有条

RoutesPage.jsx

import React from "react";
import {Route, Switch} from "react-router-dom";
import '../css/Sidebar.css'
import {CounterContext} from "../components/LessonThemes";

function RoutesPage(props) {
    const {path} = props.path;

    const routes = [
        {
            path: `${path}`,
            exact: true,
            component: () => <h2>Home</h2>
        },
        {
            path: `${path}/Calendar`,
            component: () => <h2>Test123</h2>
        },
        {
            path: `${path}/Guardian`,
            component: () => <h2>Shoelaces</h2>
        }
    ];
    const [BackgroundTheme, SetBackgroundTheme] = React.useContext(CounterContext);

    return (
        <>
            <main style={{background: BackgroundTheme}} className="page-content">
                <div className="page-container">
                    <h2>Pro Sidebar</h2>
                    <hr/>
                    <div className="tabs">
                        <Switch>
                            {routes.map((route, index) => (
                                <Route
                                    key={index}
                                    path={route.path}
                                    exact={route.exact}
                                    component={route.component}
                                />
                            ))}
                        </Switch>
                    </div>
                </div>
            </main>
        </>
    );
}

export default RoutesPage;

标签： javascriptreactjsecmascript-6react-hooksreact-context

javascript - React - 如何使用上下文从对象中应用多个值

问题描述

解决方案

推荐阅读