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

Answer 2

我使用类似于此的结构：

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

每个组件都有自己的文件夹，其中包含它的资源（我使用webpack进行编译），子组件嵌套在其父文件夹中。

ReactJS子组件目录结构

SOVLED

2 个答案: