反应组件目录的命名约定

Posted 2023-02-16

【中文标题】反应组件目录的命名约定

【英文标题】：Naming convention for react component directories

【发布时间】：2018-11-22 13:38:50

【问题描述】：

我想知道 react 中目录和组件的命名约定是什么。我在它下面有主要的components 目录和组件类型（presentational、containers、hoc、views）。 我还有名为DifferentReportsComparison 的高阶组件。他住在“components/hoc/differentreportscomparison/DifferentReportsComparison.js”路径中，但我认为他的子目录的名称可能会因为它的长名称而令人困惑。

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

【参考方案1】：

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

如果您查看 NextJS 的工作原理，它们很可能已将您称为“视图”的内容分解到一个名为 pages 的文件夹中。

但如果您担心组件的长名称，您可以选择 (a).找出一个更短的名字。或者有时人们会将文件夹中的组件文件命名为 index.js。所以在不同的reportcomparison的情况下，它会去components/hocs/DifferentReportsComparison/index.js。

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

import DifferentReportsComparison from 'components/hocs/DifferentReportsComparison'

但正如我所说，没有完美的方式来组织您的组件，而且随着项目的增长，您可能会多次更改结构。

【参考方案2】：

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