如何在反应中创建非组件文件答案

【问题标题】：How to create a non-component file in react如何在反应中创建非组件文件
【发布时间】：2022-02-02 21:30:39
【问题描述】：

我对 React 应用程序架构有疑问。我有一些帮助文件，我不想将它们用作组件，因为它们不渲染任何东西。我目前所拥有的正在工作，但我想知道专业反应开发人员对我的解决方案的意见（或者什么应该是更好的做法）。我没有在互联网上为我的案例找到任何解决方案...

我有几种类型的帮助文件：

constants.ts - 包含如下常量：

export enum ComponentType {
    TextField,
    SelectBox,
    ...
}

types.ts - 包含类型和接口，例如：

export type DBObject = {
    id: number,
    DBOClass: string,
    attributes: Array<DBObjectAttr>,
    editedAttrs: Array<DBObjectAttr>,
    isEdited: boolean
}

export interface BreadcrumbState {
    items: Array<BreadcrumbItemDef>
}

utils.ts - 包含独立的辅助函数，例如：

const getEnvironmentDomain = () => {
 some string operations...
}

XMLParser.ts - 包含 XMLParser 类，其中包含将表单的 XML 定义解析为 javascript 对象的静态方法：

export class XMLParser {
    ...

    public static parseXMLFormDefinitions = async (xmlStringDef: string): Promise<FormDefs> => {
    ...
    }
    ...
}

DBManager.ts - 包含用于数据库操作的 DBManager 类；充满了静态功能：

export class DBManager {
    ...    
    public static fetchFormDefinitions = async (): Promise<FormDefs> => { ... }
    public static getDBObjectDefinition = (DBOClass: string): DBObject => { ... }
    public static insertToDB = async (body: any, reload: boolean = true): Promise<any> => { ... }
    ...
}

如您所见，我从该文件中导出所有内容，正如您想象的那样 - 然后我将其导入到需要的组件中。但这是我设计的最佳实践吗？他们在项目结构中的最佳位置是什么？目前我有：

<src>/  
├── <components>/  
│   ├── <header>/  
│   ├── <card>/  
│   ├── ...  
├── <pages>/  
│   ├── <photos>/  
│   ├── <docs>/  
│   ├── ...  
├── <store>/  
│   ├── <reducers>/  
│       ├── BreadcrumbReducer.ts  
│       ├── DBObjectReducer.ts  
│       ├── ...  
│   ├── index.ts  
│   ├── sagas.ts  
├── constants.ts
├── types.ts
├── utils.ts
├── XMLParser.ts
└── DBManager.ts

谢谢！

【问题讨论】：

不可渲染组件是什么意思？我不确定它与您的要求有何关系。据我了解，您问的是您的文件结构是否遵循最佳做法？
@SamiElk 如您所见，这些文件不是组件，不会呈现任何内容。我的问题是它是否可以，或者我应该以某种方式将它们转换为反应组件。我现在看到，我写了令人困惑的问题标题，我更新了它......第二个问题是我的文件结构（尤其是那些帮助文件）是否遵循你所写的最佳实践。
@PetrMarek 我不知道您期望什么样的其他“更好”架构。您在做什么（utils、helpers、constants 等），我们都这样做。所以现在，不用担心。
我可以说的是：在你的 React 项目中拥有不是组件的文件是正常的。您的最终目标是尽可能少地重复代码。您可以通过在帮助函数中提取尽可能多的可重用代码来做到这一点。它还使单元测试更容易。
没有完美的项目结构，这取决于您的偏好和项目规模。当您发现例如utils 的文件变得太大时，您可以将其分隔在一个helpers 文件夹中的多个文件中。最后都是主观的，但我认为你会发现这个视频很有用：youtube.com/watch?v=XEO3mFvrDx0&t=815s

标签： javascript reactjs typescript next.js

【解决方案1】：

就我如何理解我回答的问题而言。

我认为没有最佳实践，您可以按照自己的意愿构建文件，有一些结构化约定，如果您不想使用，则不必使用它。

关于“辅助”组件，你如何称呼它们，你说的有问题

我不想将它们用作组件，因为它们不渲染任何东西

不确定你用它们做什么，但它们可能会转换为自定义钩子。

自定义挂钩允许您将一些组件逻辑提取到可重用函数中。

以上引用来自this link

或者，如果您将它们用作容器，某种 div-s 然后考虑使用反应片段。阅读react docs上的片段

【讨论】：