react+vite批量引入某文件夹下面的组件作为组件

有多个组件，但是只是拖拽后遍历生成部分组件，下面代码中的allcomponent，所以想要一次性引入desginnerComponents文件夹下面的所有组件。

1.获取所有的组件

const getAllCom = () => {
// 导入 desginnerComponents 下面的 所有 .tsx文件
  const files: Record<string, FileType> = import.meta.globEager(
    "/src/pages/desginnerComponents/*.tsx"
    // { eager: true }
  );
  // 因为通过 import.meta.globEager 返回的列表不能迭代所以直接使用 Object.keys 拿到 key 遍历
  const componentList = new Map();
  Object.keys(files).forEach((c: string) => {
    const component = files[c]?.default;
    // 挂载全局控件
    componentList.set(files[c]?.default.name, component);
  });
  return componentList;
};
export default getAllCom;

得到：

2.注册组件及使用

如果所有组件纯UI组件可以不注册，直接将返回的方法调用即可，使用到hooks必须注册组件。

纯UI组件
直接当作方法调用并传参propValue

/引入
const compent = getAllCom(); 

//在元素中直接当作方法调用
 {allcomponent.map((item) => (
      <div >{compent.get(item.component)(item.propValue)}</div>
 ))}

需要使用hooks

1. 注册

const compent = getAllCom(); //获取所有的组件（desginnerComponents下的)

// 遍历每个组件文件，并注册组件
Object.entries(compent).forEach((key, value) => {
  const componentName = key;
  React.createElement(value, { key: componentName });
});

2. 使用
   没写全哦，仅作为示例

const getConmpoent = (item) => {
    const Name = compent.get(item.component) //取到组件
    return <Name propValue={item.propValue} key={item.id}></Name> // 作为组件返回
  }

return(
<div>
 	{allcomponent.map(item => (
  	   <div>{getConmpoent(item)}</div>
 	))}
 </div>
)