javascript - hur man ändrar värdet på React Context från en annan komponent React

så jag försöker implementera en enkel temabyte via react-kontext, och jag behöver ändra värdet på kontexten (i ThemeProvider.jsx) leverantör enligt ett onChange-event i en annan komponent (ThemeSwitcher.jsx).

ThemeProvider.jsx :

import React, {createContext} from "react";
import {THEME_TYPE} from "../constants";

export const ThemeContext = createContext(THEME_TYPE.LIGHT);


const ThemeProvider = ({ children }) => {
    return <>
        <ThemeContext.Provider value={//THEME_TYPE.LIGHT or THEME_TYPE.DARK)}>
            {children}
        </ThemeContext.Provider>
    </>
};

export default ThemeProvider;

ThemeSwitcher.jsx :

import React, {useContext} from "react";
import { THEME_TYPE } from "../constants";
import {ThemeContext} from "../providers/ThemeProvider";



const ThemeSwitcher = () => {
  const themeMode = useContext(ThemeContext);
  const handleThemeChange = (e) => {
     //value of context should change according to argument 'e'
  };

  return (
    <div className="switch-container">
      <label className="switch">
        <input
          data-testid="theme-changer"
          type="checkbox"
          checked={themeMode === THEME_TYPE.DARK}
          onChange={handleThemeChange}
        />
        <span className="slider round"></span>
      </label>
      <span className="text-color bold">Dark mode</span>
    </div>
  );
};

export default ThemeSwitcher;

App.jsx:

import React, {useContext} from "react";
import { Helmet } from "react-helmet";
import NameBox from "./components/NameBox";
import ThemeSwitcher from "./components/ThemeSwitcher";
import { THEME_TYPE } from "./constants";
import Styles from "./data/Styles";
import ThemeProvider from "./providers/ThemeProvider";
import {ThemeContext} from "./providers/ThemeProvider";


const StyleTag = () => {
    const themeMode = useContext(ThemeContext);
  return (
    <Helmet>
      <style>{Styles(themeMode)}</style>
    </Helmet>
  );
};

function App() {
  return (
    <ThemeProvider>
      <StyleTag />
      <NameBox />
      <ThemeSwitcher />
    </ThemeProvider>
  );
}

export default App;

och styles.js om nödvändigt:

import { THEME_TYPE } from "../constants";

const Theme = {
  [THEME_TYPE.LIGHT]: {
    background: "#fafafa",
    text: "#rgba(0, 0, 0, 0.87)",
    divider: "rgba(0, 0, 0, 0.12)",
  },
  [THEME_TYPE.DARK]: {
    background: "#303030",
    text: "#fff",
    divider: "rgba(255, 255, 255, 0.12)",
  },
};

const Styles = (theme) => `
body {background-color: ${Theme[theme].background};}
.text-color {color: ${Theme[theme].text};}
.box {border: 1px solid ${Theme[theme].divider}}
`;

export default Styles;

Som du ser bör värdet på kontext ändras enligt indata på onChange-händelsen. Jag kunde inte komma på en lämplig lösning för att koppla dessa två, så din hjälp uppskattas.

Svar #1

Jag föreslår att lägga till useState()-hooken inuti ThemeProvider-komponenten. Här är codesandbox: https://codesandbox.io/s/magical-franklin-cril0?file=/src/ThemeProvider.jsx

Så här ser koden ut:

import React, { createContext, useState } from "react";
import { THEME_TYPE } from "./constants";

export const ThemeContext = createContext(THEME_TYPE.LIGHT);

const ThemeProvider = ({ children }) => {
   const [themeType, setThemeType] = useState(THEME_TYPE.LIGHT);

   const changeTheme = (value) => {
      if (value) {
         setThemeType(THEME_TYPE.DARK);
      } else {
         setThemeType(THEME_TYPE.LIGHT);
      }
   };

    return (
      <>
        <ThemeContext.Provider value={{ themeType, changeTheme }}>
          {children}
        </ThemeContext.Provider>
      </>
    );
 };

export default ThemeProvider;

Och sedan skulle du använda kontexten där det behövs på detta sätt:

const themeMode = useContext(ThemeContext)
themeMode.themeType // THEME_TYPE.LIGHT or THEME_TYPE.DARK
themeMode.changeTheme(value) // if value is true, it would change to dark mode, if false to light mode