import { enu, type Dictionary } from "intlayer";

const carEnumeration = {
  key: "car_count",
  content: {
    numberOfCar: enu({
      "<-1": "少于负一辆车",
      "-1": "负一辆车",
      "0": "没有车",
      "1": "一辆车",
      ">5": "几辆车",
      ">19": "许多车",
      "fallback": "备用值", // 可选
    }),
  },
} satisfies Dictionary;

export default carEnumeration;

在此示例中，enu 将各种条件映射到特定内容。当在 React 组件中使用时，Intlayer 可以根据给定的变量自动选择合适的内容。

在 Intlayer 枚举中，声明的顺序非常重要。第一个有效的声明将被选中。如果多个条件适用，请确保它们的顺序正确，以避免意外行为。

如果未声明备用值，当没有匹配的键时，函数将返回 undefined。

在 React Intlayer 中使用枚举

要在 React 组件中使用枚举，您可以利用 react-intlayer 包中的 useIntlayer 钩子。该钩子根据指定的 ID 获取正确的内容。以下是如何使用它的示例：

**/*.tsx

复制代码

复制代码到剪贴板

import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

const CarComponent: FC = () => {
  const { numberOfCar } = useIntlayer("car_count");

  return (
    <div>
      <p>
        {
          numberOfCar(0) // 输出：无车
        }
      </p>
      <p>
        {
          numberOfCar(6) // 输出：一些车
        }
      </p>
      <p>
        {
          numberOfCar(20) // 输出：许多车
        }
      </p>
      <p>
        {
          numberOfCar(0.01) // 输出：回退值
        }
      </p>
    </div>
  );
};

在此示例中，组件会根据汽车数量动态调整其输出。正确的内容会根据指定的范围自动选择。

附加资源

有关配置和使用的更详细信息，请参阅以下资源：

这些资源提供了关于在不同环境和各种框架中设置和使用 Intlayer 的更多见解。

复数

条件