react-intlayer：用于国际化（i18n）React 应用的 NPM 包

Intlayer 是一套专为 JavaScript 开发者设计的包。它兼容 React、React 和 Express.js 等框架。

react-intlayer 包允许您对 React 应用进行国际化。它为 React 国际化提供了上下文提供者和钩子。

为什么要对您的 React 应用进行国际化？

对您的 React 应用进行国际化对于有效服务全球用户至关重要。它使您的应用能够以每个用户偏好的语言传递内容和信息。这种能力提升了用户体验，并通过使应用对不同语言背景的人更易访问和相关，扩大了应用的覆盖范围。

为什么要集成 Intlayer？

基于 JavaScript 的内容管理：利用 JavaScript 的灵活性高效地定义和管理您的内容。
类型安全环境：利用 TypeScript 确保所有内容定义准确且无错误。
集成内容文件：将翻译内容与各自组件紧密结合，提升可维护性和清晰度。

安装

使用您喜欢的包管理器安装所需的包：

bash

复制代码

复制代码到剪贴板

npm install react-intlayer

使用示例

使用 Intlayer，您可以在代码库中的任何位置以结构化的方式声明内容。

默认情况下，Intlayer 会扫描扩展名为 .content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx} 的文件。

你可以通过在配置文件中设置 contentDir 属性来修改默认的扩展名。

bash

复制代码

复制代码到剪贴板

.├── intlayer.config.ts└── src    └── components        ├── Component1        │   ├── index.content.ts        │   └── index.tsx        └── Component2            ├── index.content.ts            └── index.tsx

声明你的内容

react-intlayer 设计为与 intlayer 包配合使用。intlayer 是一个允许你在代码中任何地方声明内容的包。它将多语言内容声明转换为结构化的字典，能够无缝集成到你的应用程序中。

以下是内容声明的示例：

src/Component1/index.content.ts

复制代码

复制代码到剪贴板

import { t, type Dictionary } from "intlayer";const component1Content = {  key: "component-1",  content: {    myTranslatedContent: t({      en: "Hello World",      fr: "Bonjour le monde",      es: "Hola Mundo",    }),    numberOfCar: enu({      "<-1": "少于负一辆车",      "-1": "负一辆车",      "0": "没有车",      "1": "一辆车",      ">5": "几辆车",      ">19": "许多车",    }),  },} satisfies Dictionary;export default component1Content;

在代码中使用内容

一旦声明了内容，就可以在代码中使用它。以下是如何在 React 组件中使用内容的示例：

src/components/Component1Example.tsx

复制代码

复制代码到剪贴板

"use client";import type { FC } from "react";import { useIntlayer } from "react-intlayer";export const Component1Example: FC = () => {  const { myTranslatedContent } = useIntlayer("component-1"); // 创建相关内容声明  return (    <div>      <p>{myTranslatedContent}</p>    </div>  );};

掌握您的 React 应用程序的国际化

Intlayer 提供了许多功能，帮助您实现 React 应用程序的国际化。

要了解有关这些功能的更多信息，请参阅针对 Vite 和 React 应用程序的使用 Intlayer 和 Vite 进行 React 国际化 (i18n) 指南，或针对 React Create App 的使用 Intlayer 和 React (CRA) 进行 React 国际化 (i18n) 指南。

react-intlayer 包提供的函数

react-intlayer 包还提供了一些函数，帮助你实现应用程序的国际化。

t() 要了解有关这些功能的更多信息，请参阅针对 Vite 和 React 应用的使用 Intlayer 和 Vite 进行 React 国际化 (i18n)指南，或针对 React Create App 的使用 Intlayer 和 React (CRA) 进行 React 国际化 (i18n)指南。

react-intlayer 包提供的函数

react-intlayer 包还提供了一些函数，帮助您实现应用的国际化。

文档历史

5.5.10 - 2025-06-29：初始化历史

开始