Podría usar el gancho useContext para lograr esto. Es bastante fácil usarlo en los elementos secundarios del Proveedor. Como ejemplo...

authContext.js

 import { createContext } from "react"; const authContext = createContext({ authenticated: false, setAuthenticated: (auth) => {} }); export default authContext;

Login.js (componente que consume el contexto)

 import React, { useContext } from "react"; import authContext from "./authContext"; export default () => { const { setAuthenticated } = useContext(authContext); const handleLogin = () => setAuthenticated(true); const handleLogout = () => setAuthenticated(false); return ( <React.Fragment> <button onClick={handleLogin}>login</button> <button onClick={handleLogout}>logout</button> </React.Fragment> ); };

Finalmente el index.js

 import ReactDOM from "react-dom"; import React, { useState } from "react"; import authContext from "./authContext"; import Login from "./Login"; const App = () => { const [authenticated, setAuthenticated] = useState(false); return ( <authContext.Provider value={{ authenticated, setAuthenticated }}> <div> user is {`${authenticated ? "" : "not"} authenticated`} </div> <Login /> </authContext.Provider> ); }; ReactDOM.render(<App />, document.getElementById("container"));

Como puede ver, se vuelve bastante fácil consumir los datos almacenados en el contexto usando el gancho useContext. Por supuesto, como todos los ganchos de React, solo funciona con componentes funcionales.

Si quieres ver el código funcionando. https://codesandbox.io/s/react-playground-forked-wbqsh?file=/index.js

Actualización de contexto desde un componente anidado

A menudo es necesario actualizar el contexto de un componente que está anidado en algún lugar profundo del árbol de componentes. En este caso, puede pasar una función a través del contexto para permitir que los consumidores actualicen el contexto:

tema-contexto.js

 // Make sure the shape of the default value passed to // createContext matches the shape that the consumers expect! export const ThemeContext = React.createContext({ theme: themes.dark, toggleTheme: () => {}, });

tema-alternar-botón.js

 import {ThemeContext} from './theme-context'; function ThemeTogglerButton() { // The Theme Toggler Button receives not only the theme // but also a toggleTheme function from the context return ( <ThemeContext.Consumer> {({theme, toggleTheme}) => ( <button onClick={toggleTheme} style={{backgroundColor: theme.background}}> Toggle Theme </button> )} </ThemeContext.Consumer> ); } export default ThemeTogglerButton;

aplicación.js

 import {ThemeContext, themes} from './theme-context'; import ThemeTogglerButton from './theme-toggler-button'; class App extends React.Component { constructor(props) { super(props); this.toggleTheme = () => { this.setState(state => ({ theme: state.theme === themes.dark ? themes.light : themes.dark, })); }; // State also contains the updater function so it will // be passed down into the context provider this.state = { theme: themes.light, toggleTheme: this.toggleTheme, }; } render() { // The entire state is passed to the provider return ( <ThemeContext.Provider value={this.state}> <Content /> </ThemeContext.Provider> ); } } function Content() { return ( <div> <ThemeTogglerButton /> </div> ); } ReactDOM.render(<App />, document.root);

El ejemplo anterior proviene directamente de los documentos de React Context API v16.8.6, y es la forma recomendada de actualizar un valor de contexto de un consumidor. https://reactjs.org/docs/context.html#updating-context-from-a-nested-component

En primer lugar, para actualizar el contexto del consumidor, debe acceder al contexto fuera de la función de representación. Para obtener detalles sobre cómo hacerlo, consulte

Acceda a React Context fuera de la función de renderizado

En segundo lugar, debe proporcionar un controlador del proveedor que actualice el valor del contexto y no lo modifique directamente. Su código se verá como

Padre.js

 import MyContext from "./MyContext.js"; import Child from "./Child.js"; class Parent extends Component { constructor(props) { super(props); this.state = { Message: "Welcome React", ReturnMessage:"" }; } updateValue = (key, val) => { this.setState({[key]: val}); } render() { return ( <MyContext.Provider value={{state: this.state, updateValue: this.updateValue}}> <Child /> </MyContext.Provider> ) } }

Niño

 import MyContext from "./MyContext.js"; class Child extends Component { constructor(props) { super(props); this.state = { ReturnMessage:"" }; } ClearData(e){ const val = e.target.value; this.setState({ ReturnMessage:val }); this.props.context.updateValue('ReturnMessage', val); } render() { return ( <React.Fragment> <p>{this.props.context.state.Message}</p>} <input onChange={this.ClearData} /> </React.Fragment> ) } } const withContext = (Component) => { return (props) => { <MyContext.Consumer> {(context) => { return <Component {...props} context={context} /> }} </MyContext.Consumer> } } export default withContext(Child);