Correct import / export React

Question

Correct import / export React

Tell me how to properly export and import multiple const.

File const.js

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

And there is a file App.js

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

Returns errors or works but empty const

2

javascript reactjs ecmascript-6 create-react-app

Author: Ilya Burmaka, 2019-01-15

Source

2 answers

score 4 · Answer 1

export default there can be only one.

The result of the expression evaluation is exported.

In this case, export default activeTabs,myContent; can be considered as export default (activeTabs,myContent);, which corresponds to export default myContent;

Accordingly, when importing

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

In both variables, there will be a reference to myContent.

To export multiple parts, you can add export{[16 to each of the definitions]}

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

Then you can import them as follows way:

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

Or return an object in default, for example:

export default {
    activeTabs,
    myContent,
    textForTab
};

When importing:

import constants from './const';

// constants.activeTabs

score 3 · Answer 2

The main option.Exporting everything at once

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

You can also write

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