React-i18next wechselt die Sprache in React (Projekt Internationalisierung)

Hintergrund

Im täglichen Leben kann es vorkommen, dass Sie die Sprache, Sprache usw. wechseln müssen. Tatsächlich wird es im Allgemeinen mit i18n implementiert.

Ideen

Installieren Sie zuerst das i18n-Plug-In im Projekt, führen Sie dann das Plug-In in das Projekt ein und konfigurieren Sie dann das Sprachpaket (das Sprachpaket muss von Ihnen selbst konfiguriert werden, schreiben Sie das Sprachpaket selbst, oder Sie können eines finden ist für Ihr Projekt geeignet) und verwenden Sie dann eine bestimmte Methode, um Felder anzuzeigen, die die Sprache wechseln können

Umsetzungsschritte

1. Installationsumgebung

Es müssen sowohl i18next als auch react-i18next Abhängigkeiten installiert werden:

npm install react-i18next i18next --save

2. Konfigurationsdatei

Erstellen Sie einen neuen Ordner untersrc, um internationalisierungsbezogene Konfigurationen zu speichern. Erstellen Sie drei neue Dateien in i18n
i18n

• config.ts: i18n initialisieren und Plugins konfigurieren

• en.json:Englisches Sprachprofil

• zh.json: Konfigurationsdatei für chinesische Sprache

2.1、config.ts

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import translation_en from './en.json';
import translation_zh from './zh.json';

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

i18n.use(initReactI18next).init({
    resources,
    // 默认语言  zh/en  中文/英文
    lng: 'zh',
    interpolation: {
        escapeValue: false,
    },
});

export default i18n;

2.2、zh.json

{
        "language":"语言",
        "switch":"选择",
}

2.3、en.json

{
   "language":"Language",
   "switch":"Switch",
}

3. Verwendung

3.1. Referenzkonfigurationsdateien

Referenzierte Konfigurationsdatei von auf der Seiteindex.tsx:i18nimport '../i18n/config';

import Page1 from './page1';
import Page2 from './page2';
// 引用配置文件
import '../i18n/config';

export default function IndexPage() {
  return (
    <div>
      <Page1 />
      <Page2 />
    </div>
  );
}

3.2. Verwendung in Komponenten

Verwenden Sie  s Hook< in Funktionskomponente / a> zur Abwicklung der InternationalisierunguseTranslation

// Page1 函数式组件
import React from 'react';
// 引入 useTranslation 
import { useTranslation } from 'react-i18next';

const Page1: React.FC = () => {
  const { t } = useTranslation();
  return (
    <div>
      <p>这是Page1</p>
      <p>{t('language')}</p>
    </div>
  );
};

export default Page1;

Verwendet in Klassenkomponente withTranslation Funktion höherer Ordnung (HOC) Um die Dateninjektion der Sprachkonfiguration abzuschließen

// Page2  类组件
import React from 'react';
// 引入HOC高阶函数 withTranslation 和 i18n 的ts类型定义 WithTranslation
import { withTranslation, WithTranslation } from 'react-i18next';

class ClassComponent extends React.Component<WithTranslation> {
  render() {
    const { t } = this.props;
    return (
    	<div>
     		<p>{t('language')}</p>
    	</div>
    );
  }
}
// withTranslation 完成语言配置数据注入
export const Page2 = withTranslation()(ClassComponent); 

3.3. Sprache wechseln

Verwenden SiechangeLanguage() config, um die Sprache zu wechseln

// 函数式组件
import React from 'react';
import { useTranslation, Trans } from 'react-i18next';

const Page1: React.FC = () => {
  const { t, i18n } = useTranslation();
  return (
    <div>
      <button onClick={() => i18n.changeLanguage(i18n.language == 'en' ? 'zh' : 'en')}>
        {i18n.language == 'en' ? 'zh' : 'en'}
      </button>
      <p>{t('language')}</p>
    </div>
  );
};

export default Page1;

//  类式组件
import i18n from 'i18next';

const changeLanguage= (val) => {
	i18n.changeLanguage(val); // 传入 'en' / 'zh'
};