Question

我可以在许多教程，代码示例等中看到，很多人只是将每个组件称为“ index.jsx”。我仍然认为这是最佳做法，因此我总是在开始执行此操作的项目时，很快就对它感到沮丧，并换回了更理智的内容。

我了解到您不需要在导入中重复输入名称，例如import ThisThing而不是import ThisThing/ThisThing，但是并不是每个控制台日志，编辑器标签标题等都具有相同的名称相同的名称使其无法调试或使用？

Answer 1

所以，如果您有这样的index.jsx。

src / containers / login / index.jsx

export function speak () {
  return 'speak'
}

export default function yell () {
  return 'yell'
}

然后从“说”导入

src / index.jsx

import yell, { speak } from './containers/login

您不必指定像import yell, { speak } from ./containers/login这样的索引

但是，如果您发现项目中包含一些文件夹，其中某些文件夹可能包含5个以上的组件，那么通常的做法是将它们全部导出到index.js文件中，然后您可以使用相同的方式适当地导入它们，而无需指定文件名。

假设我在名为Speak.jsx的文件夹中有Clap.jsx，Jump.jsx和components。然后，我还要在其中添加一个index.js文件夹。

export { Speak } from './Speak'
export { Clap } from './Clap'
export { Jump } from './Jump'

然后根据我需要导入的数量执行以下任何操作。

import { Speak, Clap } from './src/components'
// or
import { Jump } from './src/components'

对于默认导出，您不需要大括号

如果您按照该路径进行操作，则每个文件只能有一个默认导出。

这里要好得多，in-depth tutorial