ReactJS子组件目录结构

Question

我有一个具有以下目录结构的ReactJS应用程序, App/ - components - - SubComponent1 - - - components - - - - SubSubComponent1 - - - - - components - - - - - .... - - - - - SubSubCompoent1.js - - - SubComponent1.js - - SubComponent2 - - ... - - SubComponent3 - - ... - stores - actions - app.js

模块组件的设计使其所有子组件都保留在组件文件夹下的自己的目录中.

组件也有自己的组件,它们也驻留在父组件文件夹中的组件文件夹中.

因此创建了一个相对导入问题,并且嵌套这么多级别会变得混乱.

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

那么我要问的是这种场景的最佳目录结构是什么？

SOVLED

在webpack配置中添加这个,

resolve: {
  root: __dirname + PATH_TO_APP_ROOT
}

现在你可以用require('dir/file.js')而不是require('../../../../dir/file.js')

Answer 1

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

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所有使用它的组件的路径。这很有帮助。