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

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

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