React中命名和组织子组件（子文件夹）的推荐方式

Question

假设我正在构建一个显示用户 profile/settings 页面的页面。它可能包含个人资料、个人资料照片、简历部分等组件...

我目前有以下结构

components/
    |- profile/
        |- profile.jsx
        |- profile_photo/
            |- profile_photo.jsx
            |- edit_button.jsx
            |- edit_modal.jsx
        |- user_bio/
          |- user_bio.jsx
          |- education.jsx
          |- demographics.jsx

是否有社区推荐的方式来组织和命名这些文件？

现在路径感觉多余，因为我调用 components/profile/profile.jsx 或 components/profile/user_bio/user_bio.jsx。每个子目录下的 "main file" 应该与文件夹同名，还是像 index.jsx 这样的通用名称？还是裁员刚刚被接受？
测试去哪儿了？它们是放在与文件相同的文件夹中（如 Golang 的标准）还是放在单独的顶级 tests/ 目录中（如 Rails 项目中的 Ruby）。

谢谢！

Answer 1

反应项目的结构有不同的方法

React 建议是 https://reactjs.org/docs/faq-structure.html

您还可以阅读：

https://daveceddia.com/react-project-structure/

https://hackernoon.com/how-to-structure-your-react-app-98c48e102aad

我会说按功能分组最适合大项目，按文件类型分组更适合小项目。

Answer 2

您可以创建一个 index.js 文件并导出该文件。我们以 profile 组件为例。 index.js 文件如下所示：

export {default} from "./profile"

所以你只需要使用 components/profile 而不是 components/profile/profile.js

来导入它

React中命名和组织子组件（子文件夹）的推荐方式

Recommended way to name and organize sub-components (sub-folders) in React

reactjs

jsx

directory-structure