Saltar al contenido

Reaccionar API Contexto tutorialDec, 10thIn Reaccionar aplicaciones que normalmente usamos apoyos para compartir los datos con el niño …

marzo 13, 2020

 En

Reaccionar aplicaciones que normalmente se usan accesorios para compartir los datos de los componentes hijos, pero en algunos casos, tenemos que pasar el mismo prop a muchos componentes en tales casos API contexto brilla.

API de contexto nos ayuda a compartir los datos globales a los componentes sin necesidad de utilizar los accesorios (tales como autenticación o cambiar el tema, etc.).

Para crear un contexto que necesitamos para invocar el método React.createContext () pasando el valor inicial.

import React from "react";

const ThemeContext = React.createContext('dark'); //passing initial value

export default ThemeContext;

Por ejemplo, considere en nuestra aplicación tiene Correos y de contacto Página de componentes Ambos necesitan para acceder al estado de cambio de tema. por lo que estamos utilizando la API de contexto para pasar los datos.

import React from 'react';
import Posts from './posts';
import Contact from './contact';

function App() {

return (


)
}

export default App;

Ahora en nuestro componente de diseño que estamos importando el componente de aplicación y ThemeContext.

import React,{Component} from 'react';
import App from './app'
import ThemeContext from './context'

class Layout extends Component {

state={
light: true
}

changeTheme=()=>{
this.setState({
light:!this.state.light
})
}

render() {
return (




)
}

}

Tenemos que envuelva el componente de aplicación con el componente ThemeContext.Provider para que nuestros componentes de Mensajes y el contacto puede acceder a estos datos proporcionados por el uso de la propiedad del valor.

Ahora puede el acceso a esos datos dentro del componente de Correos y de contacto mediante el componente ThemeContext.Consumer. componente

import React from 'react'
import ThemeContext from './context'
import './posts.css'

function Posts() {

return (

{(theme) => (

  • post 1
  • post 2
  • post 3

)
}

)

}

export default Posts;

ThemeContext.Provider se utiliza para pasar los datos a sus componentes secundarios mediante el uso de valueprop. componente

ThemeContext.Consumer se utiliza para consumir que los datos utilizando la función como un niño.