Ha creado un proveedor que pone su value a disposición de todos los niños del árbol. Pero, cualquier niño que quiera usar ese valor necesita consumirlo .

Los patrones sobre cómo consumir el contexto son diferentes para los componentes de clase VS. componentes de función, pero el principio básico es el mismo: debe decirle a su componente secundario cómo obtener el valor del tema del contexto.

Consumir contexto de un componente de función

Para los componentes de función, la forma más sencilla es con el gancho useContext (ejemplo copiado directamente de los documentos de ganchos) :

 function ThemedButton() { const theme = useContext(ThemeContext); return ( <button style={{ background: theme.background, color: theme.foreground }}> I am styled by theme context! </button> ); }

Un patrón útil con un gancho personalizado

Lo anterior funciona, pero hay un patrón muy bueno en el que puedes envolver al consumidor en un enlace personalizado que llamarías algo como useTheme (vi este patrón por primera vez aquí ).

 // Step 1 const ThemeContext = React.createContext(undefined) // Step 2 function ThemeProvider({children}) { return ( <ThemeContext.Provider value={light}> {children} </ThemeContext.Provider> ) } // Step 3 function useTheme() { const context = React.useContext(ThemeContext) if (context === undefined) { throw new Error('useTheme must be used within a ThemeProvider') } return context } export {ThemeProvider, useTheme}

Paso 1 - Crea el contexto. Ya lo has hecho en tu ejemplo.

Paso 2 : crea el proveedor. Ha utilizado un proveedor en "mi aplicación".

Paso 3 - Esto es lo nuevo. Crea un enlace personalizado que verifica que el proveedor sea accesible (arrojando un error si no) y luego devuelve el valor del proveedor.

Luego usas el gancho de esta manera:

 function ThemedButton() { const theme = useTheme() return <Text color={theme.textColor}>Some text</Text> }

Hay algunos beneficios de este patrón:

1. Solo necesita importar el gancho, useTheme , en los componentes que consumen el tema. Si usa useContext directamente, debe importar el contexto y el useContext .
2. La línea throw new Error('...') le advertirá si accidentalmente intenta usar useTheme en algún lugar del árbol de componentes que no tenga acceso al proveedor.

Consumo de contexto con un componente de clase

Los ejemplos con componentes de clase son un poco largos y tienen más matices, por lo que recomendaré usar los documentos para obtener detalles sobre cómo hacerlo. Pero, un enfoque es así:

 <ThemeContext.Consumer> {value => <ThemedButton theme={value} /> </ThemeContext.Consumer>