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

IT技术 javascript reactjs
2021-04-16 23:16:35

我刚刚开始了一个新的 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理想是什么样子？

3个回答

这个确切的结构表明，例如，该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 cased 组件文件。
2021-06-06 23:16:35
归根结底，这是个人选择，但我更喜欢使用 pascal case，因为它是 js 的常见样式选择。
2021-06-16 23:16:35
您还可以将索引缩短为一行，例如： export { default } from './Editable';
2021-06-19 23:16:35
我猜目录中的 index.js 的一个好处将迫使您每个目录只有一个组件。我犯了一个罪，创建了一个名为component的文件夹，里面放了很多components.js文件，我在这个线程上遇到了模式描述，我喜欢它。也感谢清楚的解释。
2021-06-21 23:16:35

如果每个组件模式都使用这个目录来寻找一种干净的方式来组织和访问您的module，那么上面带有默认导出的示例将不适用于多个文件，例如；这个结构带有一个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 };

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

您还可以将它用于module命名空间，例如

//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
其它你可能感兴趣的问题
上一篇reactJS中的文件命名约定？ 下一篇修复，取消 useEffect 清理函数中的所有订阅和异步任务