React组件文件夹的命名规范

Question

React组件文件夹的命名规范

3

我想知道React中目录和组件的命名规范。我有一个主要的components目录，下面有不同类型的组件（presentational、containers、hoc、views）。另外，我还有一个名为DifferentReportsComparison的高阶组件。它位于"components/hoc/differentreportscomparison/DifferentReportsComparison.js"路径中，但是因为目录名太长，所以我认为他所在的目录名可能会让人感到困惑。

我想知道你如何组织你的组件，特别是那些名称很长的组件。

- papryk

2个回答

2

值得一看的是流行的React项目及其对此的看法。例如Material UI和Antd。没有绝对标准，只需尽量遵守一个模式。

- rsmidt

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Naismith · Accepted Answer

首先，没有最好的方法来组织您的组件。事实上，除非您是在一个团队中工作，否则最适合组织您的组件的方法是使它对您有意义。

如果您看一下NextJS的工作方式，他们已将大多数可能称为'视图'的内容分解成了称为pages的文件夹。

但如果您担心组件名称过长，您可以（a）找到更短的名称。有时人们会将组件文件命名为index.js。因此，在不同报告比较的情况下，它将进入components/hocs/DifferentReportsComparison/index.js。

当您导入该文件时，只需执行以下操作即可导入：

import DifferentReportsComparison from 'components/hocs/DifferentReportsComparison'

但正如我所说，没有完美的方法来组织您的组件，随着项目的不断增长，您可能需要几次更改结构。