正在将材质UI组件收集到一个文件中

Gathering Material-UI components in one file

本文关键字：一个 文件 UI 组件      更新时间：2024-04-17

我目前正在使用Material UI和ReactJS进行Meteor项目。

我想做的是有一个文件，import是我项目所需的所有Material UI组件，然后只导入我需要使用Material的那个文件，而不必将所有单独的导出粘贴在每个文件的顶部。

这可能吗？我真的是ES6/2015和进出口系统的新手，但我不确定我是否可以进口所有上述组件，然后以某种方式重新出口？

我感谢您提前提供任何帮助。无论如何，我想这并不是我项目的关键部分，但能够做到这一点肯定会很好。

两个选项：

  1. 您可以使用import mui from 'material-ui'导入所有内容。然后使用mui.Card、mui.CardActions等访问单个组件。这将使您的应用程序包比单独导入每个组件更大，这取决于您正在使用的所有组件的哪一部分，但从开发角度来看是最方便的。

  2. 在项目中创建一个文件，导入单独使用的每个组件，然后将它们全部导出到一个命名空间下。

例如，在您的通用文件中，您会有这样的行：

import Card from 'material-ui/lib/card/card';
import CardActions from 'material-ui/lib/card/card-actions';
import CardHeader from 'material-ui/lib/card/card-header';
...
export default {
   Card, CardActions, CardHeader,...
}

然后你可以将该文件批量导入到你需要的每个地方。这将导致一个与你现在所做的大小相同的包。在开发过程中，它不如选项1方便，但仍然比在每个文件中单独列出导入列表更方便。

相关文章：