Правильный import/export React

109

11 августа 2019, 09:50

Подскажите как правильно експортировать и импортировать несколько const.

file const.js

 const activeTabs = {
    /*code*/
    }
    const myContent = {
    /*code*/
    }
    const textForTab = [
    /*code*/
    ]
    export default activeTabs,myContent;

и есть файл App.js

import activeTabs from './const';
import myContent from './const';

Выдает ошибки или работает но при этом пустые const

Answer 1

export default может быть только один.

При этом экспортируется результат вычисления выражения.

В данном случае export default activeTabs,myContent; можно рассматривать как export default (activeTabs,myContent); что соответствует export default myContent;

Соответственно при импорте

import activeTabs from './const';
import myContent from './const';

В обоих переменных будет ссылка на myContent.

Чтобы экспортировать несколько частей можно в каждом из определений дописать export

export const activeTabs = {
    /*code*/
}
export const myContent = {
    /*code*/
}
export const textForTab = [
    /*code*/
]

Тогда импортировать их можно следующим образом:

import {activeTabs, myContent} from './const';

Либо в default возвращать объект, например:

export default {
    activeTabs,
    myContent,
    textForTab
};

При импорте:

import constants from './const';
// constants.activeTabs

Answer 2

Основной вариант.Экспортируем все сразу

export { // без default
    textForTab,
    myContent,
    activeTabs
}
//потом импортируем
import {textForTab, myContent, activeTabs } from './const';

Также можно так писать

export  const activeTabs = {
    /*code*/
}
export  const myContent = {
    /*code*/
}
export  const textForTab = [
    /*code*/
]
//Можете  тут тоже импортировать точно также как наверху