將組件反應為破壞的導出

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 （這是維護風險）。

---

Note : This is true for true JavaScript modules, so I'd expect it to work even with a bundler like Webpack or Rollup (which I'm guessing you're using, since you're importing an SVG, which isn't JavaScript功能，但這是捆綁商經常添加的那種東西）。