随着 Web 应用的复杂性不断增加，国际化变得越来越必要。在 React 项目中，一个好用的翻译框架是必不可少的。本文介绍了一种使用 npm 包 @gandi/react-translate 进行多语言翻译的方法，以及一些最佳实践。
@gandi/react-translate 入门
@gandi/react-translate 是一个 React 的 npm 包，可以帮助开发者实现多语言翻译。首先，需要使用 npm 安装该包：
npm install @gandi/react-translate
安装好之后，在应用程序的顶层组件中（比如说 App.js），导入翻译封装：
import { TranslateProvider } from '@gandi/react-translate'然后，我们可以包装 App 组件，并向其传递一个配置对象（见下方示例）：
export const App = () => (
<TranslateProvider config={{ defaultLanguage: 'en', resources }}>
<div className="app">
<h1>Hello, world!</h1>
<TestComponent />
</div>
</TranslateProvider>
)在这个例子中，我们将应用程序的默认语言设置为英语，使用 resources 对象指定其他语言的翻译。resources 对象的结构如下所示：
const resources = {
en: {
greeting: 'Hello!'
},
fr: {
greeting: 'Bonjour!'
}
}在组件中使用翻译，只需要在要翻译的文本上套一个 “t” 标签，并指定翻译的 key：
export const TestComponent = () => (
<div>
<p><t greeting /></p>
</div>
)最后在应用程序中引入 TranslatableStrings 组件（在上述示例中，我们可以在 App.js 组件中导入该组件）：
import { TranslatableStrings } from '@gandi/react-translate'实现语言切换
为了使用户可以切换语言，我们可以使用一个 Select 组件，让用户选择他们想要使用的语言。此外，还需要在应用程序中存储当前选择的语言。我们来看看示例代码：
-- -------------------- ---- -------
------ - -------- - ---- -------
------ - ----------------- - ---- ------------------------
------ - ------------------- - ---- ------------------------
----- --- - -- -- -
----- --------- - -
--- -
--------- -------
--
--- -
--------- ---------
-
-
----- ---------- ------------ - --------------
----- -------------------- - --- -- -
---------------------------
-
------ -
---- ----------------
------- ---------------- --------------------------------
------- ---------------------------
------- --------------------------
---------
------------------ --------- ---------------- ----- --------- -- ---------------------------
-------------------- --
-------------- --
--------------------
------
-
-在上述示例中，我们使用 useState 钩子函数来存储当前的语言选择，选择的语言将传递到 TranslateProvider 组件中的 currentLanguage 属性。将 TranslatableStrings 组件作为 TranslateProvider 的子组件包含在内，以确保翻译组件知道有哪些文本需要翻译。
翻译 React 组件
有时候，我们可能需要在 React 组件中进行翻译。例如，在下面的示例中，我们有一个 LandingPage 组件，该组件包含一个特殊的翻译标签，用于在应用程序的顶部显示欢迎消息：
-- -------------------- ---- -------
------ ----- ---- -------
----- ----------- - -- -- -
------ -
---- -------------------------
--------------- --
---
------
-
-
----- -------------- - -- -- -
------ -
------ -------------------------- -------
-
-
------ ------- -----------我们可以定义在应用程序中使用的所有字典翻译，以及包含特殊翻译标记的组件。在此之后，我们可以使用 Trans tag 渲染所有翻译文本。以下是此解决方案的代码示例：
-- -------------------- ---- -------
------ ------ - -------- - ---- -------
------ - ------------------ ----- - ---- ------------------------
------ - --------- - ---- -------------
------ ----------- ---- ---------------------
----- --- - -- -- -
----- ---------- ------------ - --------------------
------ -
------------------ --------- ---------------- ----- --------- -- ---------------------------
------- ----------- -- -----------------------------------
------- ----------- -- ------------------------------------
----------
------------ --
---
-----------
--------------------
-
-
------ ------- ---在上面的代码片段中，我们在应用程序的根组件中定义了翻译字典。我们还在按钮元素中提供了切换语言的选项。最后，我们向 TranslateProvider 组件传递了当前所选语言，并在 LandingPage 组件中应用了翻译标记（即使用 Trans tag 渲染所有翻译文本）。
最佳实践
最后，我们来看看使用 @gandi/react-translate 的最佳实践：
传递资源对象时，请将默认语言作为 “defaultLanguage” 配置中的一个属性传递，以确保您的应用程序始终显示某种语言的文本。
始终考虑标记翻译内容，以便更轻松地进行管理和编辑。
如果您的应用程序需要通过服务器动态生成翻译内容，请在服务器端使用 @gandi/slang 进行国际化处理。
如果您的应用程序包含许多翻译内容，请使用 .json 文件来组织翻译资源。
总之，@gandi/react-translate 是一个实用的多语言翻译解决方案，为开发人员提供了一种方便的方式来管理和实现 Web 应用程序的多语言支持。我们希望这个教程对您有帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/155659