样式组件文件夹系统

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 他沿着 Container/Presentation 路线前进，但以他自己的方式。

请让我把它放在那里供您考虑；不要像那样拆分你的 React 组件，除非你真的知道你会因为你正在构建的东西的性质而从中获益。遵循我上面的内容，只是没有演示文件，将组件全部放在 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

样式组件文件夹系统

Styled Components Folder System

reactjs

styled-components