一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

【前端出海】多语言篇(一):React项目中支持多语言

【前端出海】多语言篇(一):React项目中支持多语言

众所周知,国内互联网行业已经进入存量市场,竞争激烈、利润微薄。一些公司为了摆脱困境,将目标转向了海外,海外市场相比国内,竞争小、利润高,潜力大。未来数年,出海会成为越来越多公司的重要战略。

如果你所在的公司要走出国门,相应面向客户的web和H5产品都要国际化。国际化最重要的就是多语言的支持。我将以React框架为例,介绍在前端项目中如何搭建多语言。

基础项目搭建

首先创建一个React模板项目

npx create-react-app oversea-react-app --template typescript

然后下载i18n相应的依赖包

npm i i18next react-i18next

i18nextreact-i18next 不用过多介绍,就是i18n提供翻译能力的基础依赖包。

然后在项目src目录下,新建i18n目录,新建如下几个文件

  • src
    • i18n
      • index.ts
      • zh-cn.json
      • en-us.json

其中index.tsx文件代码如下:

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import enUs from './en-us.json';
import zhCn from './zh-cn.json';

export const SUPPORTED_LANG = [
    'zh-cn',
    'en-us',
];
// 配置参数的文档: https://www.i18next.com/overview/configuration-options
const option = {
    fallbackLng: 'zh', // 默认语言
    debug: process.env.NODE_ENV !== 'production',
    resources: { // 支持的语言
        en: {
            translation: enUs,
        },
        zh: {
            translation: zhCn,
        },
    },
    interpolation: {
        escapeValue: false, // not needed for react!!
    },
};
// 注入react-i18next实例并初始化
i18n.use(initReactI18next)
    .init(option);

export default i18n;

上面第三行和第四行代码引入了两个json文件,分别是英文和中文的翻译资源

{
    "multiLanguage": "多语言"
}
{
    "multiLanguage": "multi-language"
}

不要忘记在项目主文件 src/index.ts 中导入i18n

import './i18n/index'

最后在项目业务组件中使用i18n翻译功能

import React from 'react';
import { useTranslation } from 'react-i18next';

const Language: React.FC = () => {
    // useTranslation 返回的对象包含一个 t 方法,这个方法可以翻译文本
    const { t } = useTranslation();
    return <>
        <div>{t('multiLanguage')}</div>
    </>
}

export default Language;

在浏览器中可以看到,文本已经被成功翻译了

【前端出海】多语言篇(一):React项目中支持多语言

检测浏览器默认语言

项目中已经成功引入了多语言,但在实际应用场景中,是需要根据浏览器默认语言作为页面的展示语言的,这就要使用到能检测浏览器语言的插件i18next-browser-languagedetector

下载依赖并在 i8n/index.ts文件中引入

import LanguageDetector from 'i18next-browser-languagedetector';
...
// 注入react-i18next实例并初始化
i18n.use(LanguageDetector) // 检测用户当前使用的语言
    .use(initReactI18next)
    .init(option);

重启项目,查看浏览器的Application控制面板,可以看到浏览器默认语言在Local Storage中做了缓存

【前端出海】多语言篇(一):React项目中支持多语言
再将浏览器默认语言设置为英语

【前端出海】多语言篇(一):React项目中支持多语言
清空Local Storage的缓存并刷新浏览器,页面展示了英语,并且Local Storage中缓存也设置为英语

【前端出海】多语言篇(一):React项目中支持多语言

语言切换

前端实现国际化的过程中,还要提供能切换页面展示语言的功能

我们将业务组件做如下改动,核心改动点就是在切换语言时修改缓存数据i18nextLng

import React, {useState} from 'react';
import { useTranslation } from 'react-i18next';

const Language: React.FC = () => {
    const { t } = useTranslation();
    const lang = window.localStorage.getItem('i18nextLng') || 'zh';
    const [language, setLanguage] = useState(lang);
    const languageChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
        setLanguage(e.target.value);
        // 切换语言时修改缓存数据
        window.localStorage.setItem('i18nextLng', e.target.value);
        // 重新加载页面
        window.location.reload();
    }
    return <>
        <select value={language} onChange={languageChange}>
            <option value="zh">简体中文</option>
            <option value="en">English</option>
        </select>
        <br />
        <div>{t('multiLanguage')}</div>
    </>
}

export default Language;

当然i8n官方更推荐使用changeLanguage方法,调用i18n.changeLanguage,会自动修改缓存数据i18nextLng

import React, {useState} from 'react';
import { useTranslation } from 'react-i18next';

const Language: React.FC = () => {
    const { t, i18n } = useTranslation();
    ...
    const languageChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
        ...
        // 切换展示语言,会自动修改缓存数据i18nextLng
        i18n.changeLanguage(e.target.value);
        ...
    }
    ...
}

看看代码展示效果,当语言切换成简体中文,页面展示了中文,同时缓存数据也修改为zh

【前端出海】多语言篇(一):React项目中支持多语言

插值表达式

在实际应用场景中,可能会遇到一段话中夹杂了变量,这时候i18n的插值表达式就派上用场了。

插值表达式的语法是使用两个大花括号包裹变量

{
    "desc": "作者是{{author}},当前时间是{{currentTime}}"
}
{
    "desc": "The author is {{author}}, current time is {{currentTime}}"
}

在视图层,t函数支持传入第二个参数,是一个对象,对象的属性名对应插值表达式中花括号包裹的变量,属性值作为插值最终被t方法替换到翻译文本中。

<div>
    {t('desc', {
        author: '远方的戈多',
        language,
        currentTime: new Date().toLocaleString()
    })}
</div>

最终显示效果

【前端出海】多语言篇(一):React项目中支持多语言

结语

本文介绍了React项目中支持多语言的基础搭建,同时介绍了项目默认语言设置为浏览器的首选语言,切换语言以及插值表达式这些常用功能。

在下一篇中,我们将介绍如何使用js脚本进行各语言的自动翻译,以及通过脚本如何查找项目中未翻译的文本,敬请期待。

原文链接:https://juejin.cn/post/7333631025757224979 作者:远方的戈多

(0)
上一篇 2024年2月13日 上午11:07
下一篇 2024年2月13日 下午4:01

相关推荐

发表评论

登录后才能评论