如何使用打字稿将暗光模式保存在本地存储中?

问题描述 投票:0回答:0

import { createContext, useState } from "react";

export interface TypeContext {
  darkMode: true | false;
  setDarkMode: React.Dispatch<React.SetStateAction<boolean>>;
  toggleMode: () => void;
}

export interface TypeChildrenProps {
  children: JSX.Element;
}

export const GlobalThemeContext = createContext<TypeContext>({
  darkMode: false,
  setDarkMode: () => {},
  toggleMode: () => {},
});

export const ThemeContextProvider = ({ children }: TypeChildrenProps) => {
  const [darkMode, setDarkMode] = useState(false);

  // useState(localStorage.getItem('Mode') ? JSON.parse(localStorage.getItem('Mode') : false))
  // Argument of type 'string | null' is not assignable to parameter of type 'string'.
  // Type 'null' is not assignable to type 'string'

  const toggleMode = () => {
    setDarkMode(!darkMode);
  };

  return (
    <GlobalThemeContext.Provider value={{ darkMode, setDarkMode, toggleMode }}>
      {children}
    </GlobalThemeContext.Provider>
  );
};

你好。我使用打字稿上下文在暗光模式下输入,一切正常。我已将其应用到其他页面,当您单击按钮时,模式会发生变化。唯一的问题是刷新后它就会消失。我怎样才能让它保留在本地存储中?

reactjs typescript local-storage react-context
© www.soinside.com 2019 - 2024. All rights reserved.