React usa i18next para configurar multilíngue

Índice

1. Instale

2. Crie um novo diretório

3. Crie o arquivo de configuração i18n

4. Formato do pacote de idiomas

5. Comece

---

1. Instale

npm install react-i18next i18next

yarn add react-i18next i18next

2. Crie um novo diretório

Crie uma nova pasta lang em src para armazenar pacotes de idiomas e arquivos de configuração i18n;

3. Crie o arquivo de configuração i18n

Crie um novo arquivo jsx, js ou tsx no arquivo lang (por exemplo: nomeie-o config.js)

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
//中文语言包
import zh from './zh.json';
//英文语言包
import en from './en.json';

const resources = {
  en: {
    translation: en
  },
  zh: {
    translation: zh
  }
};

i18n.use(initReactI18next).init({
  resources,
  lng: 'zh',//设置默认语言（可用三元表达式进行动态切换）
  interpolation: {
    escapeValue: false
  }
});

export default i18n;

4. Formato do pacote de idiomas

zh.json

{
  "login": {
    "register": "注册",
    "signin": "登录",
    "home": "首页"
  },
  "footer": {
    "text": "版权所有 @ React"
  },
  "home": {
    "title": "首页"
  },
}

5. Comece

Primeiro introduza o arquivo de configuração de internacionalização em index.jsx

import './i18n/config';

usado na página

import React from 'react';
import { useTranslation } from 'react-i18next';
function Home() {
  const { t, i18n } = useTranslation();
  return (
    <div>
      <p>{t('login.home')}</p>
    </div>
  );
}
export default Home;

mudar de idioma

//一般是在点击事件、change事件函数中进行改变。根据自己的语言包进行切换、切换之后可以本地存储保存
i18n.changeLanguage('en')//切换英文
i18n.changeLanguage('zh')//切换中文