四步搞定项目多语言配置

1.安装所需库

终端运行

yarn add i18next i18next-browser-languagedetector react-i18next

看看pakage.json有没有这三个依赖

2.目录结构

添加i18文件夹及子文件夹locale,在locale文件夹下添加三个语言map文件，在locale文件夹同级目录添加一个index.ts用于配置多语言

配置文件代码如下

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import LanguageDetector from "i18next-browser-languagedetector";
import zh_CN from "./locale/zh_CN";
import en_US from "./locale/en_US";
import zh_TW from "./locale/zh_TW";
const lngDetector = new LanguageDetector(null, {
  lookupQuerystring: "locale"
});
i18n
  .use(lngDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: "en_US",
    debug: false,
    resources: {
      "en-US": { translation: en_US },
      "zh-CN": { translation: zh_CN },
      "zh-HANS_US": { translation: zh_CN },
      "zh-TW": { translation: zh_TW },
      "en-CN": { translation: en_US },
      en_CN: { translation: en_US },
      en_US: { translation: en_US },
      zh_CN: { translation: zh_CN },
      zh_TW: { translation: zh_TW },
    },
    interpolation: {
      escapeValue: false, // 避免将特殊字符转译成xss的安全码
    },
  });

export default i18n;

三个map文件

英文

中文

台湾

3.在入口文件引入配置i18

import "babel-polyfill";
import React from 'react';
import ReactDOM from 'react-dom';
import App from './page/apply/home';
import * as serviceWorker from './serviceWorker';
import "./assets/styles/global.scss";
import { I18nextProvider } from "react-i18next";
import i18n from "./i18n/index";

ReactDOM.render(
    <I18nextProvider i18n={i18n}>
        <App />
    </I18nextProvider>

, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

4.使用方法

代码如下：

import React, { useEffect, useState } from 'react';
import i18n from "@/i18n/index";
import { Select } from 'antd';
const {Option} = Select

const LANG = [
  {value: 'zh_CN', text: '中文'},
  {value: 'en_US', text: '英文'},
  {value: 'zh_TW', text: '台湾'},
]

export default () => {
  const [lang, setLang] = useState('zh_CN');

  useEffect(() => {
    i18n.changeLanguage(lang);
  },[lang])

  // 切换语言
  const  selectChange = (e:any) => {
    i18n.changeLanguage(e);
    setLang(e);
  }

  return (
    <div>
      {i18n.t('common_test')}
      <Select onChange={selectChange}>
        {LANG.map((item: any) => <Option value={item.value}>
          {item.text}
        </Option>)}
      </Select>
    </div>
  )
}

效果如下：