React组件目录的命名约定

Question

我想知道反应中目录和组件的命名约定是什么。我下面有主要的components目录和组件类型（presentational，containers，hoc，views）。 我还有一个名为DifferentReportsComparison的高阶组件。他住在“ components / hoc / differentreportscomparison /DifferentReportsComparison.js”路径中，但是我认为他是其子目录的名称可能会引起混淆，因为它的长名。

我想知道您如何组织组件，尤其是那些带有长名称的组件。

Answer 1

首先，没有最好的方法来组织组件。实际上，除非您是由一个人组成的团队，否则组织组件的最佳方法是对您有意义的。

如果您查看NextJS的工作方式，它们很可能会将您所谓的“视图”分解为一个名为pages的文件夹。

但是，如果您担心组件的长名称，可以选择（a）。找出一个简短的名字。有时，人们会在文件夹index.js中命名组件文件。因此，在不同的报告比较的情况下，它将使用components / hocs / DifferentReportsComparison / index.js。

当您导入该文件时，只需执行

即可将其导入。

import DifferentReportsComparison from 'components/hocs/DifferentReportsComparison'

但是正如我所说的那样，没有完美的方法来组织组件，而且随着项目的发展，您可能会改变结构两次。

Answer 2

值得一看的是流行的React项目及其对它的看法。例如。 Material UI和Antd。没有绝对标准。只是尝试坚持一种模式。