Javascript index.js 文件如何在 React 组件目录中工作？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44092341/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do index.js files work in React component directories?
提问by Carl Edwards
I just started a new React project and decided to use thispattern, which basically groups files according to their respective component:
我刚刚开始了一个新的 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
What's confusing me is how index.js works in this case. As quoted:
让我感到困惑的是 index.js 在这种情况下是如何工作的。如引用：
The index.js files are there to provide easy entry points for components. Even though they add noise, they simplify imports.
index.js 文件用于为组件提供简单的入口点。尽管它们增加了噪音，但它们简化了导入。
What the article doesn't do is go in depth of what's insidethese files. In the case of the Editable component, what would Editable.jsxand index.jsideally look like?
什么文章没有做的就是在一个什么样的深度内的这些文件。在可编辑组件的情况下，你会Editable.jsx和index.js理想是什么样子？
回答by G4bri3l
Well this exact structures suggests that, for example, the Editablecomponent would have everything about that component inside Editable.jsx. and I mean that your component code stays inside that file.
嗯，这个确切的结构表明，例如，该Editable组件将包含有关该组件的所有内容Editable.jsx。我的意思是您的组件代码保留在该文件中。
Now what's index for ? Inside index you would simply do something like this:
现在什么是索引？在索引中，您只需执行以下操作：
import Editable from './Editable.jsx';
export default Editable;
and that's literally it. This is helpful because inside other components or containers you can do this:
就是这样。这很有用，因为在其他组件或容器中，您可以这样做：
import Editable from '../Editable';
because it tries to access the index.jsfile by default thus not requiring any more info from you. It would import automatically the index.jsfile which imports the actual component itself. If you did not have an index.jsfile you would have had to do this:
因为它index.js默认尝试访问该文件，因此不需要您提供更多信息。它会自动导入导入index.js实际组件本身的文件。如果您没有index.js文件，则必须执行以下操作：
import Editable from '../Editable/Editable';
which is honestly kind of awkward. Now I personally don't like to have an index file that all it does is import a component and export it. What I usually do is just have all my component code inside the index.jsfile without the need of the Editable.jsxat all. Now that's up to you so feel free to take the approach that you like better.
老实说，这有点尴尬。现在我个人不喜欢有一个索引文件，它所做的只是导入一个组件并导出它。我通常做的只是将我所有的组件代码放在index.js文件中Editable.jsx，根本不需要。现在这取决于您，所以请随意采用您更喜欢的方法。
回答by chrisz
If one is using this directory per component pattern looking for a clean way to organize and access your modules, then the example above with a default export won't work with multiple files, e.g; this structure with a reducer directory:
如果每个组件模式都使用这个目录来寻找一种干净的方式来组织和访问您的模块，那么上面带有默认导出的示例将不适用于多个文件，例如；这个结构带有一个reducer目录：
── reducers
│ ├── todoReducer.js
│ └── filterReducer.js
│ └── themeReducer.js
│ └── index.js
├── components
├── App.js
├── app.css
└── index.js
So reducers/index.jswould look something like this:
所以reducers/index.js看起来像这样：
// index.js
import filterReducer from './filterReducer';
import todoReducer from './todoReducer';
import theme from './themeReducer';
export { filterReducer, todoReducer, theme };
...whether originally exported as default or named files in their original files, they are named exports now, and can be used cleanly in App.js as follows:
...无论最初是作为默认文件导出还是在其原始文件中命名文件，它们现在都被命名为导出，并且可以在 App.js 中干净地使用，如下所示：
// App.js
import { filterReducer, todoReducer, theme } from '../reducers';
So we can avoid all this noise:
所以我们可以避免所有这些噪音：
import filterReducer from './reducers/filterReducer';
import todoReducer from './reducers/todoReducer';
import theme from './reducers/theme';
回答by Bryan Liff
You can also leverage it for module namespaces, e.g.
您还可以将它用于模块命名空间，例如
//MyNamespace/index.js
import Mod1 from './Mod1' //assumes ./Mod1.js
import Mod2 from './Mod2' //assumes ./Mod2.js
export{
Mod1,
Mod2
}
Then in other files you can import with a namespace:
然后在其他文件中，您可以使用命名空间导入：
//SomeOtherFile.js
import * as NamespaceToUse from './MyNamespace'
// Then access as:
NamespaceToUse.Mod1
NamespaceToUse.Mod2
