英文:
Type '...' is not assignable to type '...' when using a context
问题
我在Next.js中使用`createContext`来创建一个暗模式按钮；以下是`ThemeContext.tsx`，它最初是一个普通的`jsx`文件；我正在尝试将其转换为TypeScript。```javascript"use client";import { useState, createContext } from "react";type ThemeContextType = "light" | "dark";interface ChildrenProps {children: React.ReactNode;}export const ThemeContext = createContext<ThemeContextType>("light");export const ThemeProvider = ({ children }: ChildrenProps) => {const [mode, setMode] = useState<string>("dark");const toggle = (): void => {setMode((prev) => (prev === "dark" ? "light" : "dark"));};return (<ThemeContext.Provider value={{ toggle, mode }}><div className={`theme ${mode}`}>{children}</div></ThemeContext.Provider>);};
我从ThemeContext.Provider的value中得到了错误。
Type '{ toggle: () => void; mode: string; }' is not assignable to type 'ThemeContextType'.ts(2322)index.d.ts(329, 9): The expected type comes from property 'value' which is declared here on type 'IntrinsicAttributes & ProviderProps<ThemeContextType>'
英文:
I am using createContext in Next.js to create a dark mode button; here's the ThemeContext.tsx, it's originally a normal jsx file; I am trying to convert it to TypeScript.
"use client";import { useState, createContext } from "react";type ThemeContextType = "light" | "dark";interface ChildrenProps {children: React.ReactNode;}export const ThemeContext = createContext<ThemeContextType>("light");export const ThemeProvider = ({ children }: ChildrenProps) => {const [mode, setMode] = useState<string>("dark");const toggle = (): void => {setMode((prev) => (prev === "dark" ? "light" : "dark"));};return (<ThemeContext.Provider value={{ toggle, mode }}><div className={`theme ${mode}`}>{children}</div></ThemeContext.Provider>);};
I got the error from the value in ThemeContext.Provider value={{toggle, mode}}>
Type '{ toggle: () => void; mode: string; }' is not assignable to type 'ThemeContextType'.ts(2322)index.d.ts(329, 9): The expected type comes from property 'value' which is declared here on type 'IntrinsicAttributes & ProviderProps<ThemeContextType>'
答案1
得分: 1
你需要更新ThemeContextType，因为现在它使得提供者的value只能接受等于"light"或"dark"的字符串。这样应该可以工作：
"use client";import { useState, createContext } from "react";type ModeType = "light" | "dark";type ThemeContextType = {mode: ModeType;toggle: () => void;};interface ChildrenProps {children: React.ReactNode;}export const ThemeContext = createContext<ThemeContextType>({ mode: "light", toggle: () => {} });export const ThemeProvider = ({ children }: ChildrenProps) => {const [mode, setMode] = useState<ModeType>("dark");const toggle = (): void => {setMode((prev) => (prev === "dark" ? "light" : "dark"));};return (<ThemeContext.Provider value={{ toggle, mode }}><div className={`theme ${mode}`}>{children}</div></ThemeContext.Provider>);};
英文:
You need to update ThemeContextType, because, as of now, it makes it so the value of the provider can only accept a string equal to "light" or "dark". This should work:
"use client";import { useState, createContext } from "react";type ModeType = "light" | "dark";type ThemeContextType = {mode: ModeType;toggle: () => void;};interface ChildrenProps {children: React.ReactNode;}export const ThemeContext = createContext<ThemeContextType>({ mode: "light", toggle: () => {} });export const ThemeProvider = ({ children }: ChildrenProps) => {const [mode, setMode] = useState<ModeType>("dark");const toggle = (): void => {setMode((prev) => (prev === "dark" ? "light" : "dark"));};return (<ThemeContext.Provider value={{ toggle, mode }}><div className={`theme ${mode}`}>{children}</div></ThemeContext.Provider>);};
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论