Recientemente aprendí un poco sobre reaccionar y estoy confundido acerca de cómo transferiría datos entre dos componentes.
Actualmente, tengo 2 funciones implementadas como tal:
Tengo topbar.tsx que muestra la información de la barra superior, como mostrar algún botón para abrir la barra lateral (que es mi próxima función).
import Sidebar from './sidebar' export default topbar(props) { return ( <Drawer open={isOpen} onclose={anotherfunction}> <Sidebar /> </Drawer> ) }También tengo sidebar.tsx que contiene la implementación de la barra lateral. (Esto es, si entiendo correctamente la terminología de reacción, el niño).
import CloseButton from 'react-bootstrap/CloseButton'; export default Sidebar() { return ( <CloseButton /> ) }El problema al que me enfrento es que, dado que la barra superior es la función que controla la apertura y el cierre de la barra lateral, sin embargo, quiero que aparezca un botón de cierre en mi barra lateral y que haga exactamente lo que se dice. ¿Cómo podría transferir información de estado entre estos dos archivos para poder abrir la barra lateral y cerrarla con el botón en la barra lateral?
¡Gracias!
En primer lugar, cambie el nombre de topbar a Topbar. De lo contrario, no puede renderizar su componente.
Para su pregunta, también puede pasar los accesorios directamente al componente de la barra lateral.
export default Topbar(props) { return ( <Drawer open={isOpen} onclose={anotherfunction}> <Sidebar open={isOpen} onclose={anotherfunction}/> </Drawer> ) }Eleva su estado al componente principal y pasa las funciones del controlador de eventos.
Por ejemplo:
// Holds state about the drawer, and passes functions to mamange that state as props. function Topbar() { const [isOpen, setIsOpen] = useState(false) return ( <Drawer isOpen={isOpen}> <Sidebar onClose={() => setIsOpen(false)} /> </Drawer> ) } // Drawer will show it's children if open. function Drawer({ isOpen, children }: { isOpen: boolean, children: React.ReactNode }) { if (!isOpen) return null return <div>{children}</div> } // Sidebar will send onClose to the button's onClick function Sidebar({onClose}: { onClose: () => void }) { return ( <CloseButton onClick={onClose} /> ) } // Close button doesn't care what happens on click, it just reports the click function CloseButton({onClick}: { onClick: () => void }) { return <div onClick={onClick} /> }