Creé un enlace para alternar la visibilidad de una barra de navegación en mi página web (esto se hace en NavBar.jsx), necesito alternar la barra de navegación en otra parte de mi código, es decir, en Journey.jsx, ¿puedo pasarlos como parámetros? ¿Cómo debo abordar esto?
Aquí están los extractos esenciales/resumidos de mi código si pueden ayudar....
Aplicación.jsx:
function App () { return ( <Router hashType="hashbang"> <div className="App"> <NavBar /> <Switch> <Route exact path="/l" component={() => <Lorem/>} /> <Route exact path="/j" component={() => <Journey/>} /> <Route exact path="/i" component={() => <Ipsum/>} /> </Switch> </div> </Router> ); }NavBar.jsx:
function NavBar () { //I need access to these in Journey.jsx const [sidebar, setSidebar] = useState(false); const showSidebar = () => setSidebar(!sidebar); return( //elaborations about the menu where I use these functions/varariables ); }Viaje.jsx:
function Journey () { return ( //some unimportant divs <button onClick={****I need access to showSidebar here****} ></button> ); }La forma en que mi barra de navegación está configurada es que el ícono de hamburguesa que la alterna es visible y se puede usar desde cualquier lugar (incluida la página del viaje), pero quiero este botón específico solo en la página del viaje y en ningún otro lugar porque, de acuerdo con el tema del sitio web (por mi equipo de diseñadores) se supone que es una funcionalidad estética
¿Qué puedo hacer para que esto suceda? porque intenté volver a crear el enlace en App.jsx e intenté pasar cada func/var como accesorios y luego en Journey haciendo referencia a él como props.sidebar, etc. pero eso tampoco funciona...
si la solución es simplemente pasar como parámetros, ¿cómo hago exactamente eso porque lo intenté y dijo algo como que no fue declarado?
¿Alguna alternativa?
Gracias,
handleClick en App.js (hace el cambio de estado en App.js) y pasa el método con el estado actual de la barra de navegación como porps a Journey y NavBar .La forma más fácil de compartir el estado es elevar el estado a su componente principal común y luego pasar el estado y algunos métodos que cambian el estado mediante props , como este:
function App() { // lift state up const [sidebar, setSidebar] = useState(false); const showSidebar = () => setSidebar(!sidebar); return ( <Router hashType="hashbang"> <div className="App"> {/* pass state by props */} <NavBar sidebar={sidebar} showSidebar={showSidebar} /> <Switch> <Route exact path="/l" component={() => <Lorem />} /> {/* pass state by props */} <Route exact path="/j" component={() => <Journey sidebar={sidebar} showSidebar={showSidebar} />} /> <Route exact path="/i" component={() => <Ipsum />} /> </Switch> </div> </Router> ); } function NavBar ({sidebar,showSidebar}) { return( //elaborations about the menu where I use these functions/varariables ); } function Journey ({sidebar,showSidebar}) { return ( // use state from props <button onClick={showSidebar} ></button> ); }También puede usar el contexto para pasar el estado profundamente.
Puede leer la última versión beta de los documentos de reacción, que describen muy detalladamente:
¡Espero que te sea útil!