具有动态加载的 React 插件架构

Question

I want to build a SPA on client site, which supports a plugin concept. You should be able to copy a package inside a specific folder and the server should load this component after a restart. This plugin should work without any information stored inside the base program.

I need to dynamic load a component by name. I do not have a map of all possible components. How can I load a component by only know their name?

Thank you for your help. :)

Answer 1

you can check out React.lazy . This helps with dynamic loading components which you want, but with this you need to wrap it to Suspense, because component will load not immediately.

 // This component is loaded dynamically const SomeComponent = React.lazy(() => import('./SomeComponent')); <Suspense fallback={<Spinner/>}><SomeComponent/></Suspense>