reactjs - React中命名和组织子组件(子文件夹)的推荐方式

Question

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

我目前有以下结构

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

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

1. 现在路径感觉多余，因为我调用了 components/profile/profile.jsx 或 components/profile/user_bio/user_bio.jsx。每个子目录下的“主​​文件”应该命名为与文件夹相同的名称还是命名为类似 index.jsx 的通用名称？还是裁员刚刚被接受？

2. 测试去哪儿了？它们是放在与文件相同的文件夹中(如 Golang 的标准)，还是放在单独的顶级 tests/ 目录中(如 Ruby on Rails 项目)。

谢谢!

Answer 1

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

export {default} from "./profile"

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