英文:
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>
);
};
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论