Tengo dos componentes app.js y posts.js.
Mi componente app.js
import React, { createContext, useState } from 'react' import Posts from './components/Posts' const val = createContext() const App = () => { const msg = 'hi' return ( <div> <val.Provider value={msg}> <Posts /> </val.Provider> </div> ) } export default App export { val }Mi componente Posts.js
import React from 'react' import { val } from '../App' import { useContext } from 'react' const Posts = () => { const greet = useContext(val) return <div>{greet}</div> } export default PostsQuiero actualizar el mensaje de 'hola' para dejar decir 'hola' desde el componente de Publicaciones, pero no sé cómo se puede hacer, ¿alguien puede ayudarme a entender eso, incluido el flujo de cómo se cambian los valores? yo gracias
msg debe ser estado:
const App = () => { const state = useState('hi') return ( <div> <val.Provider value={state}> <Posts /> </val.Provider> </div> ) }y entonces:
const Posts = () => { const [greet,setGreet] = useContext(val) return ( <> <div>{greet}</div> <button onClick={() => setGreet('hello')}>Change to hello</button> </> ) }Es útil considerar el contexto solo como un accesorio desde muy arriba que no desea seguir transmitiendo. Es útil, porque eso es todo lo que es.
Una razón para usar contexto en lugar de un accesorio:
Tienes que transmitirlo a través de muchos componentes, algunos de los cuales realmente no tienen nada que ver con ese accesorio.
Una razón para no usar el contexto:
Estás acoplando estrechamente tu componente a ese contexto.
Depende de usted decidir si las ventajas y desventajas de un acoplamiento estrecho valen la pena. A veces lo son, a veces no lo son. No hay reglas estrictas y rápidas.