0
169
Vistas¿Cómo usar "useContext" en mecanografiado?
Estoy tratando de crear un sistema de tema oscuro/claro en mi proyecto, pero tengo algunos problemas con el código.
Esta línea de código funciona bien en javascript:
const [darktheme, setDarkTheme] = useContext(ThemeContext);Pero cuando lo escribo en mecanografiado, obtengo 6 errores.
Sé que algunas de estas variables necesitan tener su tipo declarado, pero solo conozco el tipo de la variable darkTheme, que es un booleano.
Después de declarar los tipos, desaparecen 2 errores, ¡pero todavía hay 4 errores!
const [darktheme: boolean, setDarkTheme: any] = useContext(ThemeContext);Usé cualquier tema después de la oscuridad, lo cual no es una buena práctica, pero no conocía el tipo
Ahora solo recibo estos errores: 
Creo que el principal problema con mi proyecto es que estoy tratando de integrar javascript con mecanografiado. No sé si eso es normal o no, pero lo estoy haciendo porque algunos componentes son mucho más fáciles de escribir con mecanografiado, y algunos componentes más básicos están mejor escritos en javascript.
Aquí hay parte de mi app.js:
// Context export const ThemeContext = React.createContext(); function App() { const [darkTheme, setDarkTheme] = useState(false); return ( <ThemeContext.Provider value={[darkTheme, setDarkTheme]}>y cuando uso la función en este componente, funciona bien:
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> ) }1 Respuestas
Responde la pregunta0
Primero, defina un tipo para su valor de contexto
import { createContext, Dispatch, SetStateAction } from "react"; interface ThemeContextType { darkTheme: boolean; // this is the type for state setters setDarkTheme: Dispatch<SetStateAction<boolean>>; } Luego, cree su contexto con este tipo e inicialícelo con un valor predeterminado. Esto puede parecer innecesario, pero evitará verificar el contexto null o undefined más adelante.
export const ThemeContext = createContext<ThemeContextType>({ darkTheme: false, setDarkTheme: () => {}, // no-op default setter });Una vez que haya creado su valor de estado y setter, configúrelos en el valor del proveedor de contexto
<ThemeContext.Provider value={{ darkTheme, setDarkTheme }}> Ahora puede desestructurar el valor de contexto fácilmente a través de useContext con soporte de tipo completo
const { darkTheme, setDarkTheme } = useContext(ThemeContext);Podría continuar usando su formato de matriz, aunque no lo recomendaría.
type ThemeContextType = [boolean, Dispatch<SetStateAction<boolean>>]; export const ThemeContext = createContext<ThemeContextType>([false, () => {}]);y
<ThemeContext.Provider value={[darkTheme, setDarkTheme]}>