react中使用i18n中英文转换

最新推荐文章于 2024-10-30 16:31:50 发布

***polestar

最新推荐文章于 2024-10-30 16:31:50 发布

阅读量1.7k

点赞数

分类专栏： react 文章标签： react.js

本文链接：https://blog.youkuaiyun.com/weixin_42689147/article/details/120782911

版权

react 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何在React项目中实现i18n功能，包括下载依赖、配置locale文件、设置i18n实例并切换语言。关键步骤包括创建locale.json文件存储翻译内容，以及在组件中使用`react-i18next`进行本地化展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、下载对应的依赖包

npm i i18next
npm i react-i18next

2、在项目的public下创建一个locale的文件，在local文件中添加locale.json文件

注意：这个locale.json文件里面存储的就是对应的中英文，内容格式如下

{
    "en":{
        "common":{
            "name":"Name"
        }
    },
    "cn":{
        "common":{
            "name":"名字"
        }
    }
}

3、在layouts文件下引入下面的代码

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
// 初始化i18n
const initI18n = locale => {
    const resources = {
        zh_CN: {
            translation: locale.cn,
        },
        en_US: {
            translation: locale.en,
        },
    };
    i18n.use(initReactI18next) // passes i18n down to react-i18next
        .init({
            resources,
            lng: language ? language : 'zh_CN',
            debug: false,
            // keySeparator: false, // we do not use keys in form messages.welcome
            interpolation: {
                escapeValue: false, // react already safes from xss
            },
        });
};
fetch('/locale/locale.json')
    .then(res => res && res.json())
    .then(data => {
        data && initI18n(data);
    })
    .catch(initI18n({ cn: {}, en: {} }));
export default i18n;

4、使用方法如下

4.1、在需要转换的文件中引入依赖包

import { useTranslation } from 'react-i18next';
const { t } = useTranslation();

4.2、如果“名字”需要对应的中英文切换，这样做即可

<li>{t('common.name')}</li>

4.3、改变语言状态使用的方法

i18n.changeLanguage()