全球新闻发布系统：React-i18next实现国际【新增功能】

本文解决方案参考链接 react i18n_React i18n —如何使您的React应用程序国际化_weixin_26738395的博客-CSDN博客

1.安装React-i18next和本教程所需的依赖项

npm install i18next i18next-xhr-backend i18next-browser-languagedetector react-i18next

2.在src文件夹中创建i18next.js文件

    第一步：导入需要的库

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import Backend from "i18next-xhr-backend";
import LanguageDetector from "i18next-browser-languagedetector";

　第二步：准备初始化语言和其他功能【en 英语 zh 中文】

// 需要切换的语言类型
const Languages = ["en", "zh"]

   第三步：导出默认函数创建为i18n并添加以下代码　　

// 配置i18n
export default i18n
    .use(Backend)
    .use(LanguageDetector)
    .use(initReactI18next)
    .init({
        fallbackLng: "en",
        debug: true,
        whitelist: Languages,
        interpolation: {
            escapeValue: false,
        }
    })　

3.在index.js文件中引入上面配置好的i18next.js文件

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import './utils/http'
// 必须引入不然会报错
import "./i18next"

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  <App />
);

4.在需要使用语法切换的组件内引入 react-i18next

本项目中我将切换中英文的按钮放在了 TopHeard中，通过redux进行状态管理，实现切换语法页面语法切换

 

 

 TopHeader中添加以下代码（引入react-i18next+解构函数+按钮及相应的回调）

// 1.引入react-i18next
import { useTranslation } from "react-i18next";

    const { t, i18n } = useTranslation();
    // 英文
    function handleClick1() {
        // 修改 langname
        props.change_en()
        // 使用新的langnamej进行修改
        i18n.changeLanguage(props.langname);
    }

    // 中文
    function handleClick2() {
        props.change_de()
        i18n.changeLanguage(props.langname);
    }

 return (
        <Header
            className="site-layout-background"
            style={{ padding: '0px 16px' }}
        >
            {/* 左侧折叠图标根据 isClollapse 动态展示*/}
            {
                props.isClollapse ? <MenuUnfoldOutlined onClick={changeCollapsed} /> : <MenuFoldOutlined onClick={changeCollapsed} />
            }
            {/* 右侧展示区 */}
            <div style={{ float: 'right' }}>
                <Button
                    onClick={() => handleClick1()}
                >
                    中文
                </Button>
                <Button
                    onClick={() => handleClick2()}
                >
                    English
                </Button>
                <span>{t("topheader.welcome")} <span style={{ color: '#1890ff' }}>{username}</span>{t("topheader.back")}</span>
                <Dropdown overlay={menu}>
                    <Avatar size="large" icon={<UserOutlined />} />
                </Dropdown>
            </div>
        </Header >
    )
}　

 

以下为 获取redux中 langname属性的代码

// 映射props
const mapStateToProps = (props) => {
    const { isClollapse } = props.Collapse
    const { langname } = props.Lang
    return {
        isClollapse,
        langname
    }

}

// 映射dispatch
const mapDispatchToProps = {
    // 改变折叠属性的dispatch
    changeCollapsed() {
        return {
            type: 'change_collapsed'  // action
        }
    },
    // 改变语言的dispatch
    change_de() {
        return {
            type: 'change_zh'
        }
    },
    change_en() {
        return {
            type: 'change_en'
        }
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(withRouter(TopHeader))

　

Langreducer配置

export const Lang = (preState = { langname: 'en' }, action) => {
    // 语言默认值是英文
    let { type } = action
    switch (type) {
        // 改成中文
        case 'change_de':
            preState = { langname: 'de' }
            return preState
        // 改成英文
        case 'change_en':
            preState = { langname: 'en' }
            return preState
        default:
            return preState;
    }
}　　

5.创建相应的translation文件

在public文件创建一个名为locales的目录，创建三个文件夹，分别为zh，en， 确保这些文件夹的名称应与i18next.js文件中提供的常量值相似。为每个文件夹创建JSON文件，并将其命名为translation.json。

 

 

 zh文件 translation.json 部分示例 【这里我按照组件进行分类，后面使用时可以 组件名 . key值 去取值了，总之提前定义好使用中英文切换的属性就行】

{
    "common":{
        "ok":"确定",
        "cancel":"取消",
        "manage":"操作",
        "deleteconfirm":"确定要删除吗?"
    },
    "topheader": {
        "welcome": "欢迎",
        "back":"回来",
        "logout":"退出"
    },
    "sidemenu": {
        "title": "文章发布管理系统",
        "/home":"首页",
        "/user-manage":"用户管理",
        "/user-manage/add":"添加用户",
        "/user-manage/delete":"删除用户",
        "/user-manage/update":"更新用户",
        "/user-manage/list":"用户列表",
        "/right-manage":"权限管理",
        "/right-manage/role/list":"角色列表",
        "/right-manage/right/list":"权限列表",
        "/news-manage":"文章管理",
        "/news-manage/add":"撰写文章",
        "/news-manage/draft":"草稿箱",
        "/news-manage/category":"文章分类",
        "/audit-manage":"审核管理",
        "/audit-manage/audit":"审核文章",
        "/audit-manage/list":"审核列表",
        "/publish-manage":"发布管理",
        "/publish-manage/unpublished":"待发布",
        "/publish-manage/published":"已发布",
        "/publish-manage/sunset":"已下线"
    },
    "home":{
        "newstitle":"文章分类图示",
        "carttitle1":"用户最长浏览",
        "carttitle2":"用户点赞最多",
        "pertitle":"个人文章分类",
        "global":"全球",
        "superadmin":"超级管理员",
        "regionadmin":"区域管理员",
        "regionedit":"区域编辑"
        
    },
    "user":{
        "adduser":"添加用户",
        "updateuser":"更新用户",
        "region":"区域",
        "rolename":"角色名称",
        "username":"用户名",
        "rolestate":"用户状态",
        "password":"密码",
        "namem":"请输入用户名",
        "passwordm":"请输入密码",
        "regionm":"请输入区域",
        "rolem":"请输入角色"
    },
    "role":{
        "permission":"权限分配"
    },
    "right":{
        "name":"权限名称",
        "path":"权限路径",
        "popover":"页面配置项",
        "message":"温馨提示：删除操作不可撤销"
    },
    "login":{
        "title":"文章发布管理系统",
        "login":"登录"
    }
}

 

en文件夹translation.json 文件 格式和上面一样，将 中文翻译成英文即可，　

6.组件内使用 t() 进行引用

举例：login组件内 用户名输入框placeholder文本进行中英文切换，其他地方使用方法一样，语法：t("对象名.key值")注意：使用模板字符串时直接将双引号换成 ``即可

<Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder={t("user.username")} />

 

 　

 大家可以参考原文跟着创建一个新国际化项目，理清思路后再往写好的项目里添加会更快速。