Estoy buscando una solución en TypeScript React para pasar múltiples componentes en una matriz. He declarado interfaces e importándolo dentro de mi componente. Pero me da un error ya que 'Tipo 'Elemento' no tiene propiedades en común con el tipo 'IDataView'.
He agregado un fragmento de código a los pasos que estoy siguiendo. No estoy seguro de lo que me estoy perdiendo en el siguiente código.
Mi componente principal:
const DataViewContainer:React.FC = () => { return ( <ViewCollection views={[<BarChart />, <LineChart />]} /> ) }Componente hijo:
interface IViewCollection { views: IDataView[] } interface IDataView { barChartView?: React.ReactNode; lineChartView?: React.ReactNode; } const ViewCollection = (views: IViewCollection): JSX.Element => { return ( <Carousel> {views.map((cmp) => { return (cmp) }} </Carousel> ) }Según su tipo, se supone que debe pasar un objeto. Observe las correcciones de props , views y el uso dentro del componente ViewCollection .
const DataViewContainer: React.FC = () => { return ( <ViewCollection views={{ barChartView: <BarChart />, lineChartView: <LineChart /> }} /> ); }; const ViewCollection = (props: IViewCollection): JSX.Element => { return ( <Carousel> {props.views.barChartView} {props.views.lineChartView} </Carousel> ); };