React，如何从文件夹 index.js 导入组件

Question

I have a little component library I am trying to build out. So it made sense to put them in a folder and only import the ones I need or all at once if needed using the import * from folder.

It looks a little something like this.

 /sliceZone
 |--index.js
 |--newsBlock.js

This is how I'm exporting my component in newsBlock.js:

export default NewsBlock;

Inside my index.js in the sliceZone folder I have:

export { NewsBlock } from './newsBlock';

and inside the file Im working on I am trying to import it like:

import { NewsBlock } from './sliceZone';

But I'm getting the error in my terminal

warn "export 'NewsBlock' was not found in './sliceZone'

How do I export components from a index.js file?

Answer 1

On your index.js file you should try

export {default as NewsBlock} from './newsBlock';

Answer 2

Whenever you have a default export, you need not destructure it in import statements. So if you have

export default NewBlock;

You can import it using

import NewsBlock from ./newsBlock;
import Anything from ./newsBlock;

Both above statements are valid. And NewsBlock and Anything imports will have NewsBlock.

If you export object as below

export NewsBlock;

Then you must destructure it to use.

import {NewsBlock} from ./newsBlock;

Not sure if it is something you are looking for, but just felt it is related information and may solve your issue.

Answer 3

inside newsBlock.js you can write export default NewsBlock; and you can import that from import { NewsBlock } from './sliceZone'; or import { NewsBlock } from './sliceZone/index';

Answer 4

I managed to figure it out.

In index.js

import NewsBlock from './newsBlock';
//Anything else to import from the folder.

export { NewsBlock, /*Anything else to export*/ };

then when I import into another file I can use.

import { NewsBlock, /*Anything else*/ } from './sliceZone/';