我正在尝试在我的项目中制作一个深色/浅色主题系统,但是我的代码遇到了一些问题。
这行代码在 javascript 中运行良好:
const [darktheme, setDarkTheme] = useContext(ThemeContext);
但是当我将其写入打字稿时,出现 6 个错误。
我知道其中一些变量需要声明其类型,但我只知道 darkTheme 变量的类型,它是一个布尔值。
声明类型后,2 个错误消失了,但仍然有 4 个错误!
const [darktheme: boolean, setDarkTheme: any] = useContext(ThemeContext);
我使用了任何天黑后的主题,这不是一个好的做法,但我不知道类型
Now I just get these errors:
我认为我的项目的主要问题是我试图将 javascript 与 typescript 集成。我不知道这是否正常,但我这样做是因为有些组件用 typescript 编写起来要容易得多,而一些更基本的组件用 javascript 编写更好。
这是我的 app.js 的一部分:
// Context
export const ThemeContext = React.createContext();
function App() {
const [darkTheme, setDarkTheme] = useState(false);
return (
<ThemeContext.Provider value={[darkTheme, setDarkTheme]}>
,当我在这个组件中使用该函数时,它工作得很好:
import React, { useContext } from 'react';
import { ThemeContext } from '../App';
import Button from 'react-bootstrap/Button';
export default function DarkThemeTest() {
const [darktheme, setDarkTheme] = useContext(ThemeContext);
return (
<Button onClick={() => {
setDarkTheme(!darktheme);
}}>
Theme: {darktheme && "Dark" || "Light"}
</Button>
)
}