时间戳

首页 > 解决方案 > 多重导入 ES6

javascript - 多重导入 ES6

问题描述

我有下一个情况-我正在使用库材料-ui；并且不希望每次都使用直接的方式来node_modules导入所需的 me 组件'@material-ui/core/Tabs'。我决定使用proxy-filewhich import all 组件然后将它们导出以使用更舒适的使用 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}

我该如何解决这个问题？

谢谢。

标签： javascriptreactjs

解决方案

如果我正确理解你的目标，你可以在没有额外文件的情况下实现同样的目标。

任何一个：

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

然后像往常一样使用组件，或者使用 'import as' 语法来导入一个公共命名空间下的所有组件，即：

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

然后，您可以通过调用<components.Button>等来使用导入的组件。

推荐阅读