ReactJS子组件目录结构

我有一个目录结构如下的ReactJS应用程序，

应用程序/
-组成部分
--子组件1
--组成部分
-------子组件1
-————部件
- - - - -  ....
-子组件1.js
--子组件1.js
--子组件2
- - ...
--子组件3
- - ...
-商店
-行动
-app.js

模块组件的设计方式是，其所有子组件都保留在组件文件夹下自己的目录中

组件也有自己的组件，这些组件也驻留在父组件文件夹中的组件文件夹中

因此，创建了一个相对的导入问题，同时嵌套了如此多的层，导致了混乱

如果我在根应用程序组件下制作所有组件，那么将会有很多组件，谁在使用哪个组件将是一个问题

所以我要问的是，对于这种情况，什么是最好的目录结构

解决 在网页包配置中添加此

resolve: {
  root: __dirname + PATH_TO_APP_ROOT
}

---

现在您可以使用

require（'dir/file.js'）

而不是

require（'../../../../../dir/file.js'）

我通常创建一个结构，如果一个组件有子组件，那么这些子组件应该位于具有组件名称的文件夹下，例如

actions
components/
  component1/
    subcomponent1-1.jsx
    subcomponent1-2.jsx
  component2/
    subcomponent2-1.jsx
    subcomponent2-2.jsx

  component1.jsx
  component2.jsx
stores

这样就更容易找到合适的文件并理解依赖关系。当然，如果子组件由多个组件共享，则必须将其移动到另一个文件夹中

---

另外，如果您有

component3.jsx

文件并进行重构，您可以将一些部分移动到

component3

文件夹下的子组件中，而不必在所有使用它的组件中更改路径到

component3.jsx

。这很有帮助。

我使用类似于以下内容的结构：

App/
 - components/
 - - Component/
 - - - SubComponent/
 - - - - SubSubComponent/
 - - - - - index.js <- SubSubComponent code
 - - - - index.js <- SubComponent code
 - - - - index.css <- SubComponent CSS
 - - - index.js <- Component code
 - - - index.css <- Component CSS

App/
-组成部分/
--组件/
--子组件/
-————子成分/
-你能更好地说明这个问题吗？相对导入很好，而且您有子组件这一事实意味着它们在其他地方可能没有用处。@w00t主要问题是子组件的深度嵌套。如果子组件的深度为4-5级，则需要使用嵌套级别跟踪相对导入。我明白您的观点。您不希望从深嵌套子组件中使用
require（'../../../../../../utils/dostuff.js'）
。我用这个技巧处理它。所以这个长require变成了
require（'utils/dostuff.js'）
我也这样做。我不喜欢index.js/index.css模式，因为所有文件的名称都相同会让人讨厌。如果我真的要发布组件，我可能会更改命名，但只有在那时。即使这样，您也不需要index.js模式。@tomrac假设您在子组件1-1下有多个大型组件，那么您会怎么做？在组件中创建一个组件文件夹，或者在一个文件中执行所有子组件编码，即：子组件1-1.jsx文件，并导出主组件。我将考虑另一个嵌套级别，或者尝试重写它，并将代码拆分为两个文件，但仍在组件1>代码>文件夹（不总是可能或高效）。在第一种情况下，
subcomponent1-1-1.jsx
仅为
subcomponent1-1.jsx
所需，因此我将使用
require（'./subcomponent1-1/subcomponent1-1-1'）
将其包括在内，我认为在这个级别上，
subcomponent1-1-1
中不需要组件。如果你想避免它，你可以考虑把它移动到父组件或者创建一个MIXIN。也许你有这样的情况的真实例子？是的，这就是问题所在。您已经嵌套了3层，您将允许更多嵌套多少？如果我不在其他地方使用组件，我不关心它有多深。我不认为这有什么问题。这是我的问题，我不确定，但自从我开始使用它以来，VS代码发现重构甚至自动导入组件都很慢