越来越多的应用程序正在为全球市场设计,这意味着您的应用程序将需要为使用各种语言和方言的受众工作。React没有内置的国际化(i18n),但国际化应用程序并不难,尤其是在i18next的帮助下。
i18next是一个 i18n 框架,用和为 JavaScript 编写,它提供了标准的 i18n 插入、格式化和处理多元和语境的功能。
i18next 的 30,000 英尺视图是,它提供了一个函数,它需要一个密钥,一些选项,并返回当前语言的值。
下面是一個簡單的例子,用一個簡單的鍵和沒有選項使用上述函數。
1i18n.t('error') // 'An error occurred' in English and
2 // 'Ocurrió un error' in Spanish.
由于该函数在应用程序中可能会被多次调用,所以i18next的创建者选择了一个简称: t - 这是翻译的缩写.在i18next文档中经常看到 t 函数,你会在本文中看到它。
虽然i18next旨在与许多框架一起工作,但本文将专注于如何使用i18next国际化React应用程序。
为了与 React 一起使用 i18next,需要为需要国际化的组件提供t函数。
手动集成
在 i18next 可以使用之前,它需要进行配置. 这里是本文中的示例所使用的配置. 它关闭了值逃避,因为 React 已经为我们负责,它将当前的语言设置为英语,并为两种语言(英语和西班牙语)硬编码翻译。 查看 i18next 配置 有关更多选项。
1[label Module: i18n.js]
2import i18next from 'i18next';
3
4i18next
5 .init({
6 interpolation: {
7 // React already does escaping
8 escapeValue: false,
9 },
10 lng: 'en', // 'en' | 'es'
11 // Using simple hardcoded resources for simple example
12 resources: {
13 en: {
14 translation: {
15 age: { label: 'Age', },
16 home: { label: 'Home', },
17 name: { label: 'Name', },
18 },
19 },
20 es: {
21 translation: {
22 age: { label: 'Años', },
23 home: { label: 'Casa', },
24 name: { label: 'Nombre', },
25 },
26 },
27 },
28 })
29
30export default i18next
手动集成从导入我们预配置的 i18next 实例开始,该实例将提供t函数。
1import React from 'react';
2
3// Import a pre-configured instance of i18next
4import i18n from './i18n';
5
6function Gator({ gator }) {
7 return (
8 <div className="Gator">
9 <label>i18n.t('name.label')</label>
10 <span>{ gator.name } 🐊</span>
11 <label>i18n.t('age.label')</label>
12 <span>{ gator.age }</span>
13 <label>i18n.t('home.label')</label>
14 <span>{ gator.home }</span>
15 </div>
16 )
17}
虽然上面的示例将使用当前语言(英语)表示标签,但在语言更改后不会更新标签,因为React 还不知道如何确定语言的更改。
1import React from 'react';
2
3// Import a pre-configured instance of i18next
4import i18n from './i18n';
5
6class Gator extends React.Component {
7
8 constructor(props) {
9 super(props)
10 this.state = {
11 lng: 'en'
12 }
13 this.onLanguageChanged = this.onLanguageChanged.bind(this)
14 }
15
16 componentDidMount() {
17 i18n.on('languageChanged', this.onLanguageChanged)
18 }
19
20 componentWillUnmount() {
21 i18n.off('languageChanged', this.onLanguageChanged)
22 }
23
24 onLanguageChanged(lng) {
25 this.setState({
26 lng: lng
27 })
28 }
29
30 render() {
31 let gator = this.props.gator,
32 lng = this.state.lng
33
34 return (
35 <div>
36 <label>{ i18n.t('name.label', { lng }) }</label>
37 <span>{ gator.name } 🐊</span>
38 <label>{ i18n.t('age.label', { lng }) }</label>
39 <span>{ gator.age }</span>
40 <label>{ i18n.t('home.label', { lng }) }</label>
41 <span>{ gator.home }</span>
42 </div>
43 )
44 }
45}
看《古兰经》中的《古兰经》。
虽然我们在语言更改后解决了组件不重新渲染的问题,但我们引入了很多锅炉板代码:
- 添加了两种生命周期方法(
componentDidMount和componentWillUnmount)。 (这意味着我们必须从一个功能组件切换到一个类组件)。 - 添加了一个事件倾听器,以便我们可以通知React语言发生变化
- 引入了一种机制,使组件重新渲染。 在上面的例子中,正在使用状态。 另一种替代方法是在语言发生变化后,拨打 [
forceUpdate(https://reactjs.org/docs/react-component.html#forceupdate) 。
难道有更简单的方法吗?是的。
上一篇: React-i18Next 连接器
幸运的是,有一个更容易的方法是绑定: react-i18next 。
1import React from 'react';
2import { I18n } from 'react-i18next';
3
4// Import a pre-configured instance of i18next
5import i18n_unused from './i18n';
6
7function Gator({ gator }) {
8 return (
9 <I18n>
10 {
11 (t) => {
12 return (
13 <div>
14 <label>{ t('name.label') }</label>
15 <span>{ gator.name } 🐊</span>
16 <label>{ t('age.label') }</label>
17 <span>{ gator.age }</span>
18 <label>{ t('home.label') }</label>
19 <span>{ gator.home }</span>
20 </div>
21 )
22 }
23 }
24 </I18n>
25 )
26}
对于 i18next 的 React 绑定提供了 I18n 组件. 它预计作为其子女的单个函数表达式. 此函数将被传递给 t 函数。
看得更容易,看得更容易,看得更容易,看得更容易。
因此,请查看 i18next 和 react-i18next 有关配置,更先进的翻译和其他约束选项的更多细节。