多重導入 ES6

Question

我有下一個情況 - 我正在使用圖書館材料-ui； 並且不希望每次都直接使用node_modules來導入所需的組件'@material-ui/core/Tabs' 。 我決定使用proxy-file ，它導入所有組件，然后導出它們以便更舒適地使用 import MU componentns import - something line import Button from 'components/Button' 。 我很想從數組列表中使用靈活的導入。 示例代碼：

<code>
const materialComponents = [
  Button
];

materialComponents.forEach(item=>{
  import item from `@material-ui/core/${item}`
});


export default {
  ...materialComponents
}
</code>

所以......我有import item from @material-ui/core/${item}問題編譯器說我需要使用字符串作為路由。

我該如何解決這個問題？

謝謝。

Answer 1

如果我正確理解你的目標，你可以在沒有額外文件的情況下實現同樣的目標。

任何一個：

import { Button, Card, Icon } from '@material-ui/core'

然后像往常一樣使用組件，或者使用'import as'語法導入公共命名空間下的所有組件，即：

import * as components from '@material-ui/core'

然后，您可以通過調用<components.Button>等來使用導入的組件。