Documentation

Carga dinámica para React components

Recientemente he necesitado carga multiples React Components dentro de otro de forma dinámica. La idea era crear tabs y dentro de cada una de ellas añadir estos components. Lo único que sabíamos era su ruta absoluta.

Primero diseñamos dos interface para definir el tipo de datos que tendríamos en nuestro Json el cuál contendría toda la información:

interface TabType {
    name: string;
    components: string[];
}

interface Templates {
    tabs: TabType[];
}

const templateTabsModules: Templates = {
    tabs: [
        {
            name: "Title for Tab 1",
            components: ["./components/OneComponent"]
        },
        {
            name: "Title for Tab 2",
            components: ["./components/TwoComponent"]
        }
    ]
};

Con ello dentro de nuestro MainComponent iteramos nuestro Json cargando cada una de nuestras pestañas y asignando sus componentes:

<Tabs id="tab">
   {templateTabsModules.tabs.map(tab => {
      return (
        <Tab title={tab.name}>
          <p>The component should appears bellow:</p>
          <Suspense fallback={<div>Loading</div>}>
             tab.components.map(component => {
               const Comp = lazy(() => import(
                 /* webpackChunkName: "my-chunk-name" */
                 /* webpackMode: "lazy" */
                 `${component}`
               ).then(comp => comp));
               return (<Comp />)
             })}
            </Suspense>
         </Tab>
       );
    })}
</Tabs>

La parte más importante es como utilizamos import y webpack cargando los componentes de forma dinámica renderizando estos.

Links:

Git

Codesandbox