Question

我刚开始一个新的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.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

您还可以将其用于模块名称空间，例如

ARSCNView

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

pointOfView

Answer 3

如果每个组件模式都在使用此目录，以寻找一种干净的方式来组织和访问您的模块，则上面的示例使用默认导出功能不适用于多个文件，例如；具有减速器目录的这种结构：

── 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';

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

3 个答案: