0
172
Vistas¡La navegación de pestañas no se muestra! (React.JS / JS)
Estoy tratando de hacer navegación por pestañas para una sección en una aplicación en la que estoy trabajando, aunque tengo algunos problemas. Estuvo funcionando hace un tiempo, pero por alguna razón, no muestra las diferentes pestañas para hacer clic.
Todavía soy bastante nuevo en React y JS, por lo que me está costando seguir el código que escribí antes. (Además, no estoy seguro de por qué no estoy usando HandleChange, pero recuerdo que lo necesito)
Aquí está mi código:
import React from "react"; import InfoText from "./InfoComponent"; import TransportationText from "./TransportationComponent"; import Hotels from "./HotelsComponent"; import FAQ from "./FAQComponent"; import Covid from "./CovidComponent"; const TravelersTab = () => { const [selectedTab, setSelectedTab] = React.useState(0); const handleChange = (event, newValue) => { setSelectedTab(newValue); }; return ( <div position="static" > <h1 style={{ textAlign: "center" }}>Travelers</h1> {selectedTab === 0 && <InfoText />} {selectedTab === 1 && <Hotels />} {selectedTab === 2 && <TransportationText />} {selectedTab === 3 && <Covid />} {selectedTab === 4 && <FAQ />} </div> ); }; export default TravelersTab; Aquí hay una foto de lo que estoy viendo: 
Si alguien tiene alguna información que pueda ser útil, ¡se lo agradecería mucho! ¡¡Gracias por tomarte el tiempo para ayudarme!! : )
1 Respuestas
Responde la pregunta0
const TravelersTab = () => { const [selectedTab, setSelectedTab] = React.useState(0); const handleChange = (newValue) => { setSelectedTab(newValue); }; return ( <div position="static" > <h1 style={{ textAlign: "center" }}>Travelers</h1> {selectedTab === 0 && <InfoText onClick={handleChange(0)}/>} {selectedTab === 1 && <Hotels onClick={handleChange(1)}/>} {selectedTab === 2 && <TransportationText onClick={handleChange(2)}/>} {selectedTab === 3 && <Covid onClick={handleChange(3)}/>} {selectedTab === 4 && <FAQ onClick={handleChange(4)}/>} </div> ); }; Y configure el evento onClick en tabItem en cada componente de la pestaña, como "InfoText, Hotels, TransportationText ..." Por supuesto, esta no es la mejor práctica, pero sería de ayuda.
Puedo entregar un fragmento de código maravilloso para esto.
Por favor envíame DM si lo quieres.
~ Tormenta de talento