Necesito hacer que el componente Accordion sea reutilizable. En el futuro, debería poder agregar un nuevo objeto a la misma matriz 'accordionProps' y pasarlo al acordeón.
Aquí estoy pasando una matriz 'accordionProps' de objetos al componente. Los tipos de accesorios se definen en el componente secundario Accordion que coincide con el contenido de mi matriz.
const accordionProps = [ { title: 'Active Orders', body: <OrderModule />, }, { title: 'Drivers', body: <DriverModule />, }, ]; return ( <DashboardWrapper> <Accordion title={title} body={body}/> <Map /> </DashboardWrapper> ); }; export default Dashboard;Todavía TypeScript arroja un error:
Escriba '{accordionProps: {título: cadena; cuerpo: Elemento; }[]; }' no se puede asignar al tipo 'IntrinsicAttributes & accordionProps'. La propiedad 'accordionProps' no existe en el tipo 'IntrinsicAttributes & accordionProps'.
Tampoco funciona cuando paso accesorios como {...accordionProps}.
Así es como se ve mi componente secundario Accordion:
import { Component } from 'react'; type accordionProps = [ { title: string; body: Component; }, ]; const Accordion = (props: accordionProps) => { return ( <AccordionContainer> {props.map(section => ( <div key={section.title}> <div>{section.title})</div> <div>{section.body}</div> </div> ))} </AccordionContainer> ); }; export default Accordion;No puedo entender por qué TS no me deja hacer eso.
¿Alguien sabe si una abstracción como esa es posible en React?
La ayuda es realmente apreciada.
Declaró sus tipos de prop como una matriz con un objeto en ella:
type AccordionProps = [ { title: string; body: Component; }, ];Sin embargo, los accesorios de reacción deben ser un objeto:
type AccordionProps = { title: string; body: Component; },Luego, para representar una matriz de elementos, debe mapear la matriz de accesorios, representando el componente que desea en cada iteración del bucle.
Por ejemplo, suponiendo que tuvieras:
// declare an array of AccordionProps objects const accordionProps: AccordionProps[] = [ { title: 'Active Orders', body: <OrderModule />, }, { title: 'Drivers', body: <DriverModule />, }, ];Entonces podrías renderizarlos así:
<> { accordionProps.map(props => <Accordion {...props} />) } </> Los componentes de React siempre toman un objeto como accesorios, nunca una matriz. Uno de esos accesorios puede ser una matriz, pero los accesorios en su conjunto deben ser un objeto. Así que props.map nunca tiene razón.
Entonces, primero, arreglemos su componente Accordion :
type AccordionSection = { title: string; body: ReactNode; }; type AccordionProps = { sections: AccordionSection[]; }; const Accordion = (props: AccordionProps) => { return ( <div> {props.sections.map((section) => ( <div key={section.title}> <div>{section.title})</div> <div>{section.body}</div> </div> ))} </div> ); }; Aquí props es un objeto con una sola propiedad sections . sections es un tipo de matriz de objetos AccordionSection . Eso significa que puede recorrer esas secciones con props.sections.map .
También tenga en cuenta que cambio el tipo de body de Component a ReactNode . Component es un tipo para componentes renderizables, donde ReactNode es el tipo para contenido ya renderizado. function MyComponent() { return <></> } es un componente. <MyComponent /> es un ReactNode .
Ahora, cuando llame a este componente, debe pasar las sections prop como una matriz de objetos AccordionSection .
import Accordion, { AccordionSection } from "../Accordion"; export default function App() { const accordionSections: AccordionSection[] = [ { title: "Active Orders", body: <OrderModule /> }, { title: "Drivers", body: <DriverModule /> } ]; return ( <div className="App"> <Accordion sections={accordionSections} /> </div> ); }