https://codesandbox.io/s/simple-line-chart-forked-h39zlx?file=/src/App.tsx Quería cargar cada componente de la pestaña principal desde el componente de aterrizaje cargado arriba del enlace. al hacer clic en las 3 pestañas debajo de la descripción general, el componente de descripción general debe reemplazarse con el componente de la pestaña en la que se hizo clic y la pestaña principal debe estar activa. consulte el código completo de codesandbox y la ayuda
const [active, setActive] = useState("tab1") const isActive = (key) => (active === key ? 'active' : ''); <a to="" className={`btn btn-link ${active === "tab1"? "active":""}`} onClick={() => setActive("tab1")} >Overview</a> <a to="" className={`btn btn-link ${active === "tab2"? "active":""}`} onClick={() => setActive("tab2")} > Align & Ratio</a> <a to="" className={`btn btn-link ${active === "tab3"? "active":""}`} onClick={() => setActive("tab3")} > Avatar </a> <a to="" className={`btn btn-link ${active === "tab4"? "active":""}`} onClick={() => setActive("tab4")} > Tags </a> {active === "tab1" && <div><OverviewMain title="Overview" /></div>} {active === "tab2" && <div><AlignandRatio title="AlignandRatio" /></div>} {active === "tab3" && <div><Avatar title="Avatar"/></div>} {active === "tab4" && <div><Tags title="Tags"/></div>}¿Cómo cargar esos enlaces bajo descripción general por mapa? si tengo const Tabs=[ { tabname:"tab2", }, { tabname:"tab3", }, { tabname:"tab4", } ]
// Component Overview function Overview() { return ( <div> <hr /> <h1>Overview</h1> <a onClick={() => setActive("tab2")} className="tab"> Align & Ratio{" "} </a> <a onClick={() => setActive("tab3")} className="tab"> Avatar{" "} </a> <a onClick={() => setActive("tab4")} className="tab"> Tags{" "} </a> </div> ); }Prueba esto