在Reaction中命名和组织子组件(子文件夹)的推荐方式 [英] Recommended way to name and organize sub-components (sub-folders) in React

问题描述

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

我当前有以下结构

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项目)。

谢谢！

推荐答案

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

export {default} from "./profile"

因此您只需使用components/profile而不是components/profile/profile.js

导入即可

这篇关于在Reaction中命名和组织子组件(子文件夹)的推荐方式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！