0
159
VistasMostrar contenido mientras oculta otro en React / Next.js
acabo de empezar con React y Next.js y estoy jugando con ganchos y me quedé atascado, creé un menú vertical, quiero mostrar el contenido debajo de cada título, pero solo uno a la vez teniendo en cuenta estas 2 opciones :
- si hago clic en un título cuyo contenido ya se muestra, el contenido simplemente se ocultará.
- si hago clic en un título diferente, el contenido del último título se ocultará y el contenido del nuevo título aparecerá debajo.
Muchísimas gracias por su tiempo.
Hice un sandbox de la lógica básica de mi código: https://codesandbox.io/s/affectionate-morning-tyj8j?file=/src/App.tsx
Ese mismo código es este:
import {useState} from "react"; export default function Test() { const [content1, setContent1] = useState(null); const [content2, setContent2] = useState(null); const [content3, setContent3] = useState(null); return ( <div> <div onClick={() => setContent1(Content_1)}> Click to show content 1 <div> {content1} </div> </div> <div onClick={() => setContent2(Content_2)}> Click to show content 2 <div> {content2} </div> </div> <div onClick={() => setContent3(Content_3)}> Click to show content 3 <div> {content3} </div> </div> </div> ) } const Content_1 = () => { return ( <p>Content 1</p> ) } const Content_2 = () => { return ( <p>Content 2</p> ) } const Content_3 = () => { return ( <p>Content 3</p> ) }2 Respuestas
Responde la pregunta0
Usé la misma estructura para que sea más fácil de entender :) Si todavía tiene dificultades, manténgame en contacto.
Código sugerido
import React, { useState } from 'react'; export default function Test() { // states const [content1, setContent1] = useState(true); const [content2, setContent2] = useState(false); const [content3, setContent3] = useState(false); // content const Content_1 = <p>Content 1</p>; const Content_2 = <p>Content 2</p>; const Content_3 = <p>Content 3</p>; function setContent(id) { setContent1(id === 1); setContent2(id === 2); setContent3(id === 3); } return ( <div> <button onClick={() => setContent(1)}>Show 1</button> <button onClick={() => setContent(2)}>Show 2</button> <button onClick={() => setContent(3)}>Show 3</button> {content1 && <div>{Content_1}</div>} {content2 && <div>{Content_2}</div>} {content3 && <div>{Content_3}</div>} </div> ); }0
Debería dar un paso atrás y pensar de manera un poco más abstracta sobre lo que significa su interacción con la interfaz de usuario.
- si hago clic en un título cuyo contenido ya se muestra, el contenido simplemente se ocultará.
- si hago clic en un título diferente, el contenido del último título se ocultará y el contenido del nuevo título aparecerá debajo.
Tan efectivamente, solo tiene una sección de contenido abierta/visible a la vez. No es necesario almacenar estados individuales para cada sección de contenido que desea alternar manualmente y, a medida que aumenta la cantidad de secciones de contenido, deberá aumentar la cantidad de alternancias linealmente. Esta es una forma terriblemente ineficiente de escalar.
Sugiero usar un solo estado para mantener qué sección de contenido está activa. Use un controlador de alternancia para volver a "cerrar" una sección si su ID se establece nuevamente, de lo contrario, establezca una nueva ID de sección. Procesa condicionalmente la sección si su id coincide con el id activo establecido en el estado.
function App() { const [active, setActive] = useState<number>(-1); const toggleHandler = (id: number) => () => setActive((active) => (active === id ? -1 : id)); return ( <div> <div onClick={toggleHandler(1)}> Click to show content 1{active === 1 && <Content1 />} </div> <div onClick={toggleHandler(2)}> Click to show content 2{active === 2 && <Content2 />} </div> <div onClick={toggleHandler(3)}> Click to show content 3{active === 3 && <Content2 />} </div> </div> ); } 