Question

我确实希望按功能具有文件结构。但是我正在使用样式化的组件，并且我有很多文件。例如，在我的应用程序中的实体project目录中，我有：

Projects.js ProjectList.js ProjectCreate.js ProjectShow.js Card.js CardHeader.js CardBody.js CardFooter.js TasksCounter.js {{ 1}} ProjectDescription.js CardAdd.js ProjectDelete.js actions.js reducer.js saga.js

我可以有更多文件，但我的页面仍在构建中，因此以后可以添加更多文件。我应该再次分割这些文件吗？例如要有constants.js Projects ProjectCreate之类的子目录，将公用文件放在根ProjectShow目录中，并将特定文件放入这三个目录中？

project

我在十几个教程中看到了许多不同的方法，但是这些示例始终非常简单，仅具有几个功能。

更好的解决方案，也许是使用 Ducks （鸭子）并将每个样式化的组件放在同一文件中？

Answer 1

我通常为每个react（自定义）组件创建一个名为views的单独文件夹。

views
 - Cards
   - index.js
   - module.js
   - test.js
   - styles.js
 - Button
 - InputFields
 - ...
 - ...

在每个视图中，请注意，有一个index.js包含react组件。 module.js将包含化简器和操作（如果有）。 test.js将仅对该组件进行测试，最后styles.js或styles.css/scss将具有样式

具有样式化组件和CRUD的文件结构

1 个答案: