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

【问题标题】：How do index.js files work in React component directories?index.js 文件如何在 React 组件目录中工作？
【发布时间】：2017-05-21 01:30:38
【问题描述】：

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

├── 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 组件，Editable.jsx 和 index.js 的理想外观是什么？

【问题讨论】：

一个index.js 文件允许您将import（或require()）其父文件夹作为一个模块。此行为是从 Node.js 复制的，它在其文档中的 Folders as Modules 下对此进行了介绍 - “如果目录中不存在 package.json 文件，则 Node.js 将尝试加载 index.js或 index.node 从该目录中删除文件。"

标签： javascript reactjs

【解决方案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。这取决于您，所以请随意采用您更喜欢的方法。

【讨论】：

非常感谢您为我解决这个问题。只是出于好奇，您通常是否将文件（css、test 等）保存在组件目录中 pascal cased 或 snake case（如文章中所见）？我问是因为在您的情况下，索引文件代替了帕斯卡大小写的组件文件。
归根结底，这是个人选择，但我更喜欢使用 pascal case，因为它是 js 的常见样式选择。
我猜目录中 index.js 的好处将迫使您每个目录只有一个组件。我犯了创建一个名为 component 的文件夹的罪行，并且在其中放置了许多 components.js 文件，我在这个线程上遇到了 pattern describe，我喜欢它。也感谢您的清晰解释。
您还可以将索引缩短为单行，例如：export { default } from './Editable';

【解决方案2】：

如果每个组件模式都使用这个目录来寻找一种干净的方式来组织和访问你的模块，那么上面带有默认导出的示例将不适用于多个文件，例如；这个结构有一个 reducer 目录：

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

所以 reducers/index.js 看起来像这样：

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

export { filterReducer, todoReducer, theme };

...无论最初导出为默认文件还是原始文件中的命名文件，现在都被命名为exports，可以在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';

【讨论】：

有处理嵌套索引文件的聪明方法吗？例如。 common/index.js 从common/components/index.js“收集”和导出。我必须单独导入和导出所有组件吗？

【解决方案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

【讨论】：