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

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

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

'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 をエクスポートします。

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

'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高階関数を使用して言語設定のデータ注入を完了します

'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>
    );
};