在 React 17+ 中向枚举添加函数（带有函数组件）答案

【问题标题】：Add functions to an enum in React 17+ (with functional components)在 React 17+ 中向枚举添加函数（带有函数组件）
【发布时间】：2021-09-20 13:03:12
【问题描述】：

我想在我的 React 功能组件（即无类）TypeScript 项目中向 Enum 类型添加函数。

正如asked and answered here 一样，这可以通过以下两种方式之一完成：

class ModeUtil {
public static toString(mode: Mode) {
    return Mode[mode];
}

或

enum Mode {
    X,
    Y
}

namespace Mode {
    export function toString(mode: Mode): string {
        return Mode[mode];
    }

    export function parse(mode: string): Mode {
        return Mode[mode];
    }
}

由于到目前为止我已经能够在我的项目中避免类，我更喜欢保持这种方式，因此我赞成命名空间方法。

但是，命名空间方法违反了no-namespace ESLint 规则。

因此，使用类毕竟是一种有效的方法吗？我的意思是，在 React 中，引入了功能组件以支持基于类的组件，以避免突变问题。在这种情况下，类本身将只包含静态方法...

【问题讨论】：

枚举是麻烦的仅限 TS 的构造，因此如果您需要使用不受欢迎的东西，例如名称空间或仅限静态的类，那就是代价。更合适的解决方案是放弃枚举。

标签： reactjs typescript enums

【解决方案1】：

我不认为 React 选择远离类意味着“一般来说，类是不好的，应该避免”。它只是意味着“在 React 中，一个组件可以更好地表达和更容易地用一个函数组件来定义”。

所以回答您的问题：类通常是一种有效的方法。但是，您需要了解它是否适合您的场景。在您的具体情况下，我认为它可以顺利运行。或者，如果您不这么认为，您可以禁用该 eslint 规则。

但是，React 摒弃了基于类的组件这一事实，并不意味着类是不好的。只需使用 React 函数式组件，并在您认为有帮助的时候随意使用类。

【讨论】：

谢谢。我知道类通常是一种有效的方法，但我对在 React 功能组件项目中使用类的共识更感兴趣。如果在这种情况下使用一个类被认为是被接受的，那么问题就解决了。

【解决方案2】：

所以我最终得到了一个没有命名空间或模块名称的模块（即非类特定）方法。这确保我符合no-namespace ESLint 规则，并且我可以在不引入类的情况下保持代码库的清洁。

假设您有这样的 Drink 枚举：

export enum Drink {
  GinTonic,
  LongIslandIceTea
}

然后您可以像这样定义您的 utils/helper 函数：

import { Drink } from "../models/drink";

const toHumanString = (drink: Drink): string => {
  switch (drink) {
    case Drink.GinTonic:
      return "Gin Tonic";
    case Drink.LongIslandIceTea:
      return "Long Island Ice Tea";
    default:
      throw new Error(`Unknown drink ${drink}.`);
  }
};
const toMachineString = (drink: Drink) => {
  switch (drink) {
    case Drink.GinTonic:
      return "GinTonic";
    case Drink.LongIslandIceTea:
      return "LongIslandIceTea";
    default:
      throw new Error(`Unknown drink ${drink}.`);
  }
};
const parse = (drinkAsString: string): Drink => {
  switch (drinkAsString) {
    case "GinTonic":
      return Drink.GinTonic;
    case "LongIslandIceTea":
      return Drink.LongIslandIceTea;
    default:
      throw new Error(`Failed to parse drink ${drinkAsString}.`);
  }
};
export const DrinkUtils = {
  parse: parse,
  toHumanString: toHumanString,
  toMachineString: toMachineString
};

我添加了一个演示here。

这类似于具有静态方法的类，因为 DrinkUtil 对象在编译时在 IDE 中可用。

【讨论】：