Reactjs 使用TS自动导出同一文件夹中的所有组件

我有一个

图标

文件夹，它有很多

图标

我试图自动导出它们，但无法实现

这是我的目录图

components
 ㅏ ...
 ㅏIcons
    ㅏ index.ts
    ㅏ IconA.tsx
    ㅏ IconB.tsx
    ㅏ ...
    ㅏ IconZ.tsx
 ㅏ ...

图标/索引.ts

// I wanna avoid exporting components like this.
// export { IconA } from './IconA';

//below code doesn't work in Typescript.
const req = require.context('.', true, /\.\/.\.tsx$/)

req.keys().forEach((key: any) => {
  const componentName = key.replace(/\.\/.\.tsx$/, '$1')
  module.exports[componentName] = req(key).default
});

图标/IconA.tsx

import React from 'react';

export const IconA = () => (<svg>...</svg>);

---

我认为这里的问题是，因为您正在动态导入和重新导出，TypeScript不可能猜测您正在导出的组件的类型，因为在编译时它是未知的：您的导入在编译器眼中只是文件

使用脚本生成

index.ts

文件，从“/IconA”导出{IconA}，怎么样从您的每个图标文件，非常类似于您在这里所做的？然后，您可以在构建过程中包含此脚本，并在typescript编译器运行之前每次编译时都运行它

import { IconA, IconB, IconZ } from 'components/Icons'