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。这取决于你，所以你可以随意采取你更喜欢的方法。

Answer 2

如果每个组件模式都使用这个目录，寻找一种干净的方式来组织和访问模块，那么上面使用默认导出的示例将无法处理多个文件，例如，这个结构包含一个还原目录：

── reducers
│   ├── todoReducer.js
│   └── filterReducer.js
│   └── themeReducer.js
│   └── index.js
├── components
    ├── App.js
    ├── app.css
    └── index.js

所以减缩器/index.js看起来如下所示：

// index.js
import filterReducer from './filterReducer';
import todoReducer from './todoReducer';
import theme from './themeReducer';

export { filterReducer, todoReducer, theme };

...whether最初在其原始文件中导出为默认文件或命名文件，现在它们被命名为导出，并且可以在App.js中干净地使用，如下所示：

// App.js
import { filterReducer, todoReducer, theme } from '../reducers';

所以我们可以避免所有这些噪音：

import filterReducer from './reducers/filterReducer';
import todoReducer from './reducers/todoReducer';
import theme from './reducers/theme';

Answer 3

你也可以利用它的模块命名空间，例如。

//MyNamespace/index.js

import Mod1 from './Mod1' //assumes ./Mod1.js
import Mod2 from './Mod2' //assumes ./Mod2.js

export{
  Mod1,
  Mod2
}

然后，在其他文件中，您可以使用命名空间导入：

//SomeOtherFile.js

import * as NamespaceToUse from './MyNamespace'

// Then access as:
NamespaceToUse.Mod1
NamespaceToUse.Mod2