React 动态加载组件方案还需要改变map代码。所以这里我们使用动态加载的方式，将所有的设备详情组件都放到同一个文件

需求背景

项目中需要接入很多设备类型，在设备类型较少时，使用了map，根据设备类型渲染出对应的设备详情组件和设备卡片组件，但是当设备类型多了之后，每个文件都要import 进来

这就导致了文件头部会有一大堆文件，并且每次还需要改变map代码。

所以这里我们使用动态加载的方式，将所有的设备详情组件都放到同一个文件夹中，根据设备类型动态决定要显示哪个组件。

解决根据条件从文件夹中渲染其中一个文件时需要import 所有文件的问题，对项目代码进行分割,只有当组件被加载,内部的资源才会导入，并且新增设备类型时，无需再改动该文件。

有使用common.js 规范，也有使用es 规范，这里为了保持项目一致性采用了es 规范的React.lazy 方案，与Suspense配合使用。

每增加一种设备类型，就在全局常量文件中，增加它要渲染的组件名称

然后在渲染的页面上，使用React.lazy 动态加载组件

const lazyComponent = (componentName?: string) => {
  return React.lazy(() => import(`./components/deviceDetailComponents/${componentName}`));
};