React usa i18next para configurar multilingüe

Tabla de contenido

1. Instalar

2. Crea un nuevo directorio

3. Crear archivo de configuración i18n

4. Formato del paquete de idioma

5. Empezar

---

1. Instalar

npm install react-i18next i18next

yarn add react-i18next i18next

2. Crea un nuevo directorio

Cree una nueva carpeta lang en src para almacenar paquetes de idioma y archivos de configuración i18n;

3. Crear archivo de configuración i18n

Cree un nuevo archivo jsx, js o tsx en el archivo lang (por ejemplo: asígnele el nombre 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 del paquete de idioma

zh.json

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

5. Empezar

Primero introduzca el archivo de configuración de internacionalización en index.jsx

import './i18n/config';

usado en la pagina

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;

cambiar de idioma

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