React 国際化 react-i18next の詳細な説明

React 国際化 react-i18next の詳細な説明

ここに画像の説明を挿入

導入

react-i18next は、 i18nextをベースにした強力な国際化フレームワークです。 reactおよびreact-nativeアプリケーションで使用できます。 現在、非常に主流の国際化ソリューションです。

i18nextには次の利点があります。

  • i18next をベースにしているので react に限らず、一度学んで他の場所でも使えます。
  • hoc、フック、クラスのシナリオで国際化のための複数のコンポーネントを提供します
  • サーバーサイドレンダリングに適しています
  • 2011 年に開始された長い歴史があり、ほとんどのフロントエンド フレームワークよりも古いものです。
  • 長い歴史があるため、より成熟しており、i18next が解決できない国際化の問題はありません。
  • 多くのプラグインがサポートされており、例えば、プラグインを使用して現在のシステムのロケールを検出し、サーバーまたはファイルシステムから翻訳リソースを読み込むことができます。

インストール

i18nextreact-i18next両方の依存関係をインストールする必要があります。

npm install react-i18next i18next --save
または
yarn add react-i18next i18next --save


構成

国際化関連の設定を保存するために、 srcの下に新しいi18nフォルダを作成します。

i18nに 3 つの新しいファイルを作成します。

  • config.ts : i18n を初期化し、プラグインを構成する
  • en.json : 英語言語設定ファイル
  • zh.json : 中国語言語設定ファイル

ここに画像の説明を挿入

ja.js で

{
    「ヘッダー」: {
        "登録":"登録",
        "signin":"サインイン",
        "ホーム": "ホーム"
    },
    「フッター」: {
        「詳細」: 「React のすべての権利は留保されています」
    },
    "家": {
        "hot_recommended": "ホットなおすすめ",
        "new_arrival": "新着",
        "joint_venture": "ジョイントベンチャー"
    }
}

.js は、

{
    「ヘッダー」: {
        "登録":"登録",
        "signin":"ログイン",
        "ホーム": "ホーム"
    },
    「フッター」: {
        「詳細」: 「著作権 @ React」
    },
    "家": {
        "hot_recommended": "ホットなおすすめ",
        "new_arrival": "新着",
        "joint_venture": "ジョイントベンチャー"
    }
}

config.ts

'i18next' から i18n をインポートします。
'react-i18next' から { initReactI18next } をインポートします。

'./en.json' から translation_en をインポートします。
'./zh.json' から translation_zh をインポートします。

定数リソース = {
    ja: 翻訳:
        翻訳: translation_en,
    },
    ja: {
        翻訳: translation_zh,
    },
};

i18n.use(initReactI18next).init({
    リソース、
    長さ: 'zh',
    補間:
        エスケープ値: false、
    },
});

デフォルトの i18n をエクスポートします。

使用

参照プロファイル

index.tsx内のi18n構成ファイルを参照します: import './i18n/config';

'react' から React をインポートします。
'react-dom' から ReactDOM をインポートします。
'./index.css' をインポートします。
'./App' から App をインポートします。
import './i18n/config'; // 設定ファイルを参照 ReactDOM.render(
    <React.StrictMode>
        <アプリ />
    </React.StrictMode>,
    ドキュメント.getElementById('ルート')
);

コンポーネントでの使用

方法1

クラスコンポーネントwithTranslation高階関数(HOC)を使用して、言語構成のデータ注入を完了します。

'react' から React をインポートします。
'./Home.module.css' からスタイルをインポートします。

//HOC高階関数withTranslationとi18n ts型定義WithTranslationを導入する 
「react-i18next」から{withTranslation, WithTranslation}をインポートします。

クラス HomeComponent は React.Component<WithTranslation> を拡張します {
    与える() {
        定数 t は、 this.props に代入されます。
        戻る <>
           <h1>{t('header.home')}</h1>
           <ul>
               <li>{t('home.hot_recommended')}</li>
               <li>{t('home.new_arrival')}</li>
               <li>{t('home.joint_venture')}</li>
           </ul>
        </>
    }
}

export const Home = withTranslation()(HomeComponent); // withTranslation高階関数を使用して言語設定のデータ注入を完了します

方法2

関数コンポーネントuseTranslationフックを使用して国際化を処理する

'react' から React をインポートします。
'react-i18next' から {useTranslation, Trans} をインポートします。

エクスポートconstホーム: React.FC = () => {
    const { t } = useTranslation()
    戻る (
		<div>
			<h1>{t('header.home')}</h1>
			<ul>
				<li>{t('home.hot_recommended')}</li>
				もう一つの方法があります */
				<li><Trans>home.new_arrival</Trans></li>
			</ul>
		</div>    
    );
};

言語を切り替える

'i18next' から i18n をインポートします。

定数changeLanguage= (val) => {
	i18n.changeLanguage(val); // valパラメータの値は'en'または'zh'です
};

または

'react' から React をインポートします。
'react-i18next' から {useTranslation} をインポートします。

エクスポートconstホーム: React.FC = () => {
    const { t, i18n } = useTranslation()
    戻る (
		<button onClick={()=>i18n.changeLanguage(i18n.language=='en'?'zh':'en')}>{i18n.language=='en'?'zh':'en'}</button>
    );
};

React 国際化 react-i18next に関するこの記事はこれで終わりです。React 国際化 react-i18next に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • react-intlはReactの国際化と多言語化メソッドを実装します
  • reactの国際化のためのプラグインであるreact-i18n-autoの使い方の詳細な説明
  • React 国際化実装コード例

<<:  純粋なCSSで立体的な画像配置効果を実現するサンプルコード

>>:  Nginx+tomcat ロードバランシングクラスタの実装方法

推薦する

MySQLテーブルのフィールドと関連属性をエクスポートする手順

データベース内のテーブルのフィールドとプロパティをエクスポートし、テーブルを作成してWordに保存す...

Docker で Redis センチネル モードを構成する方法 (複数のサーバー上)

目次序文状態DockerをインストールするRedisのマスターノードとスレーブノードを構成する序文以...

Dockerコンテナにnginxを簡単にデプロイするプロセスの分析

1. コンテナにnginxサービスをデプロイするcentos:7 イメージはコンテナを実行し、このコ...

CSS の ::before と ::after 疑似要素について知らないこと

CSS には、一般的には使用されない 2 つの疑似クラス、before と :after があります...

高可用性 Web クラスターを実装するための Keepalived+Nginx+Tomcat サンプル コード

高可用性 Web クラスターを実現する Keepalived+Nginx+Tomcat 1. Ngi...

VMwareのCentosシステムでNavicatがMySQLサーバーに接続できない問題を解決します

ホスト 'xxxx' はこの MySQL サーバーに接続できませんエラー: 1130...

Docker を使用してフロントエンド アプリケーションをデプロイする方法

Dockerはますます普及しています。環境を軽量かつ柔軟に分離し、容量を拡張し、運用保守管理を容易に...

Centos8 で Apache httpd2.4.37 を使用して Web サーバーをインストールする詳細な手順

ステップ 1: yum install httpd -y #httpd サービスをインストールします...

Linux で MySQL 5.7.19 をアンインストールする方法

1. MySQLが以前にインストールされていたかどうかを確認するコマンド: rpm -qa|grep...

PSSHを使用してLinuxサーバーを一括管理する

pssh は、多数のマシンでのバッチ ssh 操作に使用される、Python で実装されたオープン ...

mysql8.0.19 winx64バージョンのインストール問題を解決する

MySQL は、スウェーデンの会社 MySQL AB によって開発されたオープンソースの小規模なリレ...

Vue+elementUI コンポーネントは、折りたたみ可能な動的レンダリングのマルチレベル サイドバー ナビゲーションを再帰的に実装します。

かなり前に実装された機能ですが、クリックすると選択したメニュー項目の背景色が白くなることに気付きまし...

ネイティブJSが様々なスポーツの均一な動きを実現

この記事では、ネイティブ JS で実装された均一なモーションを紹介します。その効果は次のとおりです。...

Reactのref属性を深く理解する方法

目次概要1. Refsオブジェクトの作成1.1 React.createRef() 1.2React...