index.js文件如何在React组件目录中工作？

Question

我刚刚开始一个新的React项目，并决定使用此模式，该模式基本上根据文件各自的组成部分对文件进行分组：

├── actions
│   ├── LaneActions.js
│   └── NoteActions.js
├── components
│   ├── App
│   │   ├── App.jsx
│   │   ├── app.css
│   │   ├── app_test.jsx
│   │   └── index.js
│   ├── Editable
│   │   ├── Editable.jsx
│   │   ├── editable.css
│   │   ├── editable_test.jsx
│   │   └── index.js
...
│   └── index.js
├── constants
│   └── itemTypes.js
├── index.jsx
├── libs
│   ├── alt.js
│   ├── persist.js
│   └── storage.js
├── main.css
└── stores
    ├── LaneStore.js
    └── NoteStore.js

在这种情况下，令人困惑的是index.js的工作方式。如引用：

使用index.js文件可以为组件提供简单的入口点。即使它们增加了噪音，也简化了导入。

什么文章没有做的就是在一个什么样的深度 内的 这些文件。在可编辑组件的情况下，你会Editable.jsx和index.js理想是什么样子？

Answer 1

好吧，这种精确的结构表明，例如，Editable组件将在其中包含有关该组件的所有内容Editable.jsx。我的意思是您的组件代码保留在该文件中。

现在索引是什么？在索引内部，您只需执行以下操作：

import Editable from './Editable.jsx';

export default Editable;

就是这样。这很有用，因为在其他组件或容器中，您可以执行以下操作：

import Editable from '../Editable';

因为index.js默认情况下它会尝试访问该文件，因此不需要您提供任何其他信息。它将自动导入导入index.js实际组件本身的文件。如果您没有index.js文件，则必须执行以下操作：

import Editable from '../Editable/Editable';

老实说有点尴尬。现在我个人不喜欢拥有一个索引文件，它所做的只是导入一个组件并导出它。我通常要做的就是将我所有的组件代码都放在index.js文件中，而Editable.jsx根本不需要。现在由您决定，因此可以随时采取自己喜欢的方法。