Saltar al contenido

¿Cómo uso Reaccionar useContext gancho para consumir dataNov, 22ndIn este tutorial, vamos a aprender acerca de una mejor manera de consumir el …

marzo 13, 2020

 

En este tutorial, vamos a aprender acerca de una mejor manera de consumir los datos de contexto mediante el uso de useContext gancho.

Reaccionar serie de tutoriales Ganchos

  • useState gancho
  • useRef gancho
  • obtener los datos utilizando ganchos

¿Cuál es Reaccionar API de contexto?

Reaccionar API contexto nos ayuda a pasar los datos hacia el árbol de componentes reaccionan en lugar de pasar manualmente los datos para cada componente utilizando los apoyos. de

dejan ver una API de contexto ejemplo .

import React from "react";

// ThemeContext is created with default value "null"
const ThemeContext = React.createContext(null);
// it returns two components Provider and Consumer

function App() {
return (

{/* we are wrapping the Provider component by passing
the current value "dark" */}


);
}

// Now we are consuming the ThemeContext data inside Post component
function Post() {
return (

{theme => (

{console.log(theme) // dark}

My posts

)}

);
}

En el código anterior en primer lugar, hemos creado un contexto sin pasar por el nulo valor inicial se vuelve de nuevo dos componentes proveedor y el consumidor.

Proveedor : Se utiliza para pasar al bajar los datos a los componentes.

Consumidor: Se utiliza para consumir los datos que se pasa por la componente del proveedor.

dentro del componente del Consumidor, tenemos que utilizar la función como un niño para que podamos acceder a los datos en el parámetro de la función. reescritura de

useContext ejemplo de uso gancho

Let el código anterior utilizando el gancho useContext.

import React,{useContext} from "react";

// ThemeContext is created with default value "null"
const ThemeContext = React.createContext(null);
// it returns two components Provider and Consumer

function App() {
return (

{/* we are wrapping the Provider component by passing
the current value "dark" */}


);
}

// Now we are consuming the ThemeContext data inside Post component
function Post() {
const theme = useContext(ThemeContext);

return (

{console.log(theme)}

My posts

);
}

¿Usted ha visto la magia En el componente del anuncio en lugar de envolver con el proveedor de componentes que acabamos de invocar el gancho useContext pasando el ThemeContext, de modo que poder acceder a los datos que se transmiten mediante el uso de propuestas de valor en el componente del proveedor.