• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

148
Vistas
Componente de pestaña: los botones de pestaña desplazables horizontalmente se vuelven a renderizar al hacer clic

Detalles del componente: este es un componente de pestaña donde los botones de pestaña se pueden desplazar horizontalmente

Problema: cuando me desplazo horizontalmente y hago clic en un botón de pestaña. El desplazamiento horizontal se restablece. Tal vez todo el contenedor de pestañas se vuelve a representar debido al IDK de setState.

Esperando: quiero poder hacer clic en un botón de pestaña y no actualizar la posición de desplazamiento horizontal del contenedor del botón.

Código actual:

 function Tabs(props) { const [tabState, setTabState] = useState(0); const [menuData, setMenuData] = useState('') const TabContainer = styled.div` width: 100%; display: flex; flex-wrap: no-wrap; flex-direction: row; margin: 0 0 20px 0; padding: 20px; align-items: flex-start; justify-content: flex-start; background-color: #fff; overflow-x: auto; const handleTabClick = (index) => { setTabState(index);}return( <> <TabParent> <TabContainer> {props.data && props.data.dataDeets.map((dataDeets,catIndex) => { return ( <TabBtn key={catIndex} onClick={() => handleTabClick(catIndex) } active={tabState === catIndex ? true : false}> {menu.category} </TabBtn> ) }) } </TabContainer> </TabParent> {props.data && props.data.menu.map((menu, catIndex) => { return ( <TabCont key={catIndex} active={tabState === catIndex ? true : false}> <small> {data.categoryDesc} </small> {data.items.map((items, itemIndex) => { return ( <div key={itemIndex} onClick={event => props.openDetails(catIndex, itemIndex, event)}> <ItemCard key={itemIndex} title={items.title} imgurl={items.imgurl} desc={items.desc} price={items.price} /> </div> ) }) } </TabCont> ) }) } </> );
almost 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Mi error de novato: espero que esto ayude a otros novatos :)

useState hizo que todo el componente se volviera a renderizar

Mi solución Mover la salida como un componente separado. Esto permite Para mantener su propio estado.

almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda