Tengo un estado booleano de bgWhite. Si cambia, cambio el color de fondo. Todo esto está en el archivo index.js en el directorio de páginas.
¿Cómo puedo acceder al estado bgWhite desde el componente para hacer algo como cambiar el color de fondo?
import { useState } from "react"; import Hello from "../components/Hello"; export default function Home(props) { const [bgWhite, setBgWhite] = useState(true) return ( <div> <div onClick={() => setBgWhite(!bgWhite)} className='cursor-pointer inline-block bg-blue-400 p-4 m-2 select-none'>Click me</div> <div className={`${bgWhite ? 'bg-red-500' : 'bg-green-600'} p-4 m-2 inline-block`}>BG</div> <Hello /> </div> ); } El componente <Hello /> :
export default function Hello() { return( <div className="p-4 m-2 bg-yellow-600 inline-block"> <div>Hi</div> </div> ) } Además, si hago que el color de fondo cambie div a otro componente que lleve el estado, ¿cómo puedo acceder al estado de ese componente al componente <Hello /> ?
En correcto en nuevo estado
import { useState } from "react"; import Hello from "../components/Hello"; export default function Home(props) { const [bgWhite, setBgWhite] = useState(true) const {hello} = useState(Hello) return ( <div> <div onClick={() => setBgWhite(!bgWhite)} className='cursor-pointer inline-block bg-blue-400 p-4 m-2 select-none'>Click me</div> <div className={`${bgWhite ? 'bg-red-500' : 'bg-green-600'} p-4 m-2 inline-block`}>BG</div> <Hello /> </div>); }
Dado que el componente Hello es un elemento secundario de su componente de página index.js , puede simplemente pasar el estado y la función setState a través de props , es la forma más fácil para el ejemplo que está proporcionando y supongo que esto es lo que está buscando hacer.
import { useState } from "react"; import Hello from "../components/Hello"; export default function Home(props) { const [bgWhite, setBgWhite] = useState(true) return ( <div> <div onClick={() => setBgWhite(!bgWhite)} className='cursor-pointer inline-block bg-blue-400 p-4 m-2 select-none'>Click me</div> <div className={`${bgWhite ? 'bg-red-500' : 'bg-green-600'} p-4 m-2 inline-block`}>BG</div> <Hello bgWhite={bgWhite} setBgWhite={setBgWhite} /> </div> ); }Luego, reciba esos accesorios en su componente y utilícelos cuando los necesite:
export default function Hello({bgWhite, setBgWhite}) { return( <div className="p-4 m-2 bg-yellow-600 inline-block"> <div>Hi</div> </div> ) } Si toma el div que cambia su color de fondo junto con el estado a otro componente, deberá pensar un poco más en cómo pasaría ese estado al componente Hello . Puede hacer que Hello sea un elemento secundario del nuevo componente del que está hablando o usar la API de Context para acceder a ese estado en cualquier lugar de su aplicación.