样式化的组件文件夹系统

Question

我一直在阅读有关React中样式化组件的各种文章。一篇这样的文章建议使用表示形式和结构组件，但是在样式化组件文档中，我们显示了表示形式和结构都放置在同一文件中。

这是样式组件的反模式吗？谢谢您的帮助。

Answer 1

我不这么认为。您是否同意样式是演示的关注点？在这种结构中，您可以将样式放在它们自己的文件夹中或在表示组件旁边。

我可以介绍一下文件夹和命名结构。

如果您想拆分逻辑和表示形式，可以使用以下内容：

- src/
  - components/
    - SomeComponent/
      - index.js         <- Container/Logic
      - presentation.js  <- Presentation/Layout
      - styles.js        <- styled-component
      - index.test.js    <- unit tests
      - _snapshots_/     <- snapshots
    - AnotherComponent/
      - index.js
      - presentation.js
      - styles.js
      - index.test.js
      - _snapshots_/

但是，根据我的专业经验，我发现使用此模式后的可读性或可维护性没有任何好处。实际上，这使得使用该技术的新手很难理解和使用。

我不是唯一的一个。丹·阿布拉莫夫（Dan Abramov）最初提出此建议，但他本人认为，对于我们现在的技术状况，这不是一个很好的现代解决方案。 His article on Presentational and Container Components。

Another view on the matter from Brad Frost，他以自己的方式沿着“容器/演示文稿”路线走。

请让我把它扔出去供您考虑；除非您真的知道自己会因为构建的性质而从中获得收益，否则不要像这样拆分React组件。遵循我上面的内容，但是没有演示文稿的文件，将Component全部放入index.js，分割代码以获取胜利，并专注于简单性。

- src/
  - components/
    - SomeComponent/
      - index.js         <- Component
      - styles.js        <- styled-component
      - utils.js         <- component-specific helpers/utils
      - index.test.js    <- unit tests
      - _snapshots_/     <- snapshots