reactjs - 样式化组件文件夹系统

Question

我一直在阅读有关 React 中样式化组件的各种文章。一篇这样的文章建议使用演示和结构组件，但在 styled-components 文档中，我们看到演示和结构都放在同一个文件中。

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

标签： reactjsstyled-components

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 本人后来表示，对于我们现在拥有的技术状态，这不是一个好的现代解决方案。 他关于演示和容器组件的文章。

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