首页 > 解决方案 > 为什么要在 React 中为一个组件同时创建 index.js 和 Component.js?

问题描述

在研究一些项目时,我反复发现作者遵循的文件结构在没有上下文的情况下对我来说毫无意义。

例如,对于任何给定的组件,都会有一个文件夹Header。会有两个文件,一个是 Header.js,另一个是 index.js(在同一个子文件夹中)。两者都会export default const,但 index.js 也会导入相邻的 Header 组件。

这种结构背后的逻辑是什么?

标签: javascriptreactjs

解决方案


当您将事物(测试、组件、操作、reducers 等)组合到子文件夹中时,这是一种避免导入的常见模式:

// src/
//  components/
//    Header/
//      index.js
//      Header.js
//      Header.test.js

import Header from 'components/Header/Header';

有利于:

import Header from 'components/Header';

推荐阅读