导入与其所在目录同名的JavaScript文件

Question

在我的React和Webpack项目中,我有以下React组件的项目结构:

Component/
??? Component.jsx
??? index.jsx
??? styles.css

该index.jsx文件只是导入和导出Component.jsx; 原因是在需要它的文件中,它允许使用以下内容:

import Component from '../Component'

而不是

import Component from '../Component/Component'

然而,这似乎是一个不必要的额外步骤,需要所有新组件都遵循.

考虑到这一点,我的问题是:我可以两全其美吗？我希望能够只Component.jsx和styles.css我的目录中,但不必在我两次使用的名称import声明.

Answer 1

我建议你个人喜欢以下结构:

您的组件树结构(作为示例,每个组件都有不同的文件夹结构.由您来保持其干净整洁.Componeus文件夹中的Index.jsx只是规范化访问那些需要它们的组件):

src/components/
    Butter/
        Butter.jsx
        index.jsx
    Beets/
        Beets.jsx
    Cabbage/
        index.jsx
    Meat.jsx
index.jsx

内容 components/index.jsx

export Butter from './Butter/index.jsx';
export Beets from './Beets/Beets.jsx';
export Cabbage from './Cabbage/index.jsx';
export Meat from './Meat.jsx';

一些容器Borscht.jsx在项目的其他地方使用这些组件

import {
    Beets,
    Cabbage,
} from 'src/components';