React 组件文件夹结构答案

【问题标题】：React components folder structureReact 组件文件夹结构
【发布时间】：2026-02-15 00:55:01
【问题描述】：

在 React 应用程序中与我的组件一起使用的最佳文件夹结构是什么？

我现在正在学习 react，我正在尝试将 Bootstrap 主题 (Jumbotron) 转换为 React。

这个模板有一个导航栏，里面有一些链接和一个搜索栏，所以我创建了一个导航栏组件，一个 NavBarMenu（组件）和一个 NavBarSearch（组件）。文件夹结构如下：

这是最好的开始方式吗？或者我应该创建一个 NavBar 文件夹，并在其中创建一个 NavBarMenu 和 NavBarSearch？

就像这样：

src
/components
/NavBar
 index.js
 /NavBarMenu
  index.js
 /NavBarSearch
  index.js

最佳做法是什么？

谢谢

【问题讨论】：

没有最好的。有些只是将所有组件放在一个文件夹中，有些则将它们构建到不同的文件夹中，有时是嵌套的.. 完全取决于您的需求和品味。

标签： reactjs

【解决方案1】：

我将 Nav 设为容器。如果您打算在导航栏上动态/有条件地显示内容，则需要使用状态来跟踪它们。

Nav 容器负责我可能想要呈现的不同类型的导航，因此我可以在顶部使用 NavBar，或者在移动布局中使用 SideNav。

导航容器知道您是要显示登录/注册链接，还是带有用户名和图片的个人资料链接。

然后，我的 NavBar 组件负责布置所有链接或子组件，例如搜索栏或配置文件链接。

-Containers
  -Nav / Nav.js
-Components
  -Nav
    -NavBar / NavBar.js NavBar.css
    -NavSearch / NavSearch.js NavSearch.css
    -NavProfile / NavProfile.js NavProfile.css

不要纠结于文件夹结构的细节。虽然它很重要，但它最终与提供给用户的最终产品无关。文件夹结构需要保持一致，并且对您和从事该项目的其他任何人都有意义。

比文件夹结构更重要的是容器和组件的逻辑结构。确保您为此付出了很多。

【讨论】：

非常简洁的答案。感谢您的帮助

【解决方案2】：

如果你需要创建子目录来组织你的逻辑，那么是的，这将是一个很棒的目录结构。但我会警告不要过度抽象。如果你不需要在多个地方使用一个组件，它可能不需要它自己的文件。

另一种方法是只为子组件创建文件，而不是创建整个子目录，如下所示： - Nav - __tests__ - NavBar.js - NavBarMenu.js - NavBarSearch.js

另外，我将把它留在这里，因为我认为你可以使用它。您可以在有或没有 webpack 的情况下使用它。很高兴拥有： https://www.npmjs.com/package/module-alias#usage-with-webpack

【讨论】：

【解决方案3】：

为了使 React 应用程序可维护，我遵循以下文件夹结构：

src

 -assets

  --images

-components

  --container - This will have all logical components

  --presentation - This will have all view components

-services index.js - All end point call will come here

我找到了这个最好的文件夹结构here。

【讨论】：