Digamos que estoy creando un componente de tablero de React. Puede estar lleno de widgets de React, cada uno de los cuales puede ser diferente y reordenable.
Importo cada widget así:
import SomeComponent1 from './SomeComponent1.tsx'; import SomeComponent2 from './SomeComponent2.tsx'; import SomeComponent3 from './SomeComponent3.tsx'; // ... and so on.Tengo una serie de widgets como este:
const widgets = [ {sortOrder: 7, component: SomeComponent1}, {sortOrder: 10, component: SomeComponent2}, {sortOrder: 12, component: SomeComponent3}, // ... and so on. You get the idea. ]Entonces quiero mostrarlos. Mi primer intento es algo como esto:
return ( <section style={styles.dashboardWrapper}> {[...widgets] .sort((a: Widget, b: Widget) => a.sortOrder - b.sortOrder) .map((widget: Widget, i: number) => <DashboardWidget key={i}>{widget.component}</DashboardWidget>) } </section> ) El {widget.component} por supuesto no funciona. Esto es pan comido en Svelte debido a <svelte:component this={widget.component} /> . Entonces, ¿cómo lo haces en React?
En su caso, es bastante simple: en lugar de {widget.component} , haga <widget.component /> . Si es necesario, también puede pasar accesorios, como en <widget.component index={i} example="hello" />
Nota: normalmente, no se permite usar una letra minúscula al comienzo de un elemento JSX para un componente personalizado, ya que los elementos en minúscula se reservan para elementos integrados, como <div> o <span> . Puede salirse con la suya en su caso porque tiene un . allí, y eso hace que sea inequívoco que este no es un elemento integrado.
Entonces, si se encuentra con un caso en el que la carcasa es un problema, simplemente asigne el componente a una variable diferente que tenga una letra mayúscula y utilícela:
const Component = widget.component; return <DashboardWidget key={i}><Component /></DashboardWidget>Solo tienes que actualizar tu declaración de widgets a esto:
const widgets = [ {sortOrder: 7, component: <SomeComponent1 />}, {sortOrder: 10, component: <SomeComponent2 />}, {sortOrder: 12, component: <SomeComponent3 />}, // ... and so on. You get the idea. ]Debería funcionar bien en tu caso.