Сбор материалов-компонентов пользовательского интерфейса в одном файле

Question

В настоящее время я работаю над проектом Meteor с использованием материалов UI и ReactJS.

Что бы я хотел сделать, это один файл, который содержит все компоненты компонентов материала, которые мне понадобятся для моего проекта, а затем просто импортируйте этот единственный файл, где мне нужно использовать материал, вместо того, чтобы чтобы вставить весь отдельный экспорт в начало каждого файла.

Возможно ли это? Я действительно новичок в ES6/2015 и в системе импорта/экспорта, но я не был уверен, могу ли я импортировать все указанные компоненты, а затем каким-то образом реэкспортировать их?

Я ценю любую помощь раньше времени. Я думаю, что это не совсем важная часть моего проекта, но, конечно, было бы неплохо иметь возможность сделать это.

Answer 1

два варианта:

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 во время разработки, но еще более удобен, чем отдельный список импорта в каждом из ваших собственных файлов.