将组件反应为破坏的导出

Question

我正在使用 create-react-app 构建我的应用程序。我有像 src/images/icons 这样的文件夹结构，在图标文件夹中我有 index.js：

import Logo from "./my-logo.svg";

export {
  Logo
}

我这样做是因为我可以在任何地方使用任何图标

import { Logo } from '../images/icon'

否则我必须这样做

import Logo from '../images/icons/my-logo.sv'

通常一个页面不会有 1 或 2 个图标，它可以更多，我不想有超长的导入。但这并不能真正解决问题。

问题是 src/images/icon 中的 index.js 仍在增长。每次我在我的图标文件夹中添加一个新图标时，我都必须更改 index.js。有没有更好的解决方案？

Answer 1

您可以使用命名导出格式直接重新导出默认导出，因为默认导出的名称实际上是default：

export {default as Logo} from "./my-logo.svg";

这替换了您当前在 index.js 中的四行（忽略空白行），并且避免了两次列出 Logo（这是维护风险）。

---

注意：这适用于真正的 JavaScript 模块，所以我希望它甚至可以与 Webpack 或 Rollup 之类的打包程序一起使用（我猜你正在使用它，因为你重新导入 SVG，这不是 JavaScript 功能，而是打包程序经常添加的那种东西）。