導入react-i18next は、
インストール
構成 国際化関連の設定を保存するために、
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 をエクスポートします。 使用参照プロファイル
'react' から React をインポートします。 'react-dom' から ReactDOM をインポートします。 './index.css' をインポートします。 './App' から App をインポートします。 import './i18n/config'; // 設定ファイルを参照 ReactDOM.render( <React.StrictMode> <アプリ /> </React.StrictMode>, ドキュメント.getElementById('ルート') ); コンポーネントでの使用方法1 クラスコンポーネントの '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 関数コンポーネントの '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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: 純粋なCSSで立体的な画像配置効果を実現するサンプルコード
>>: Nginx+tomcat ロードバランシングクラスタの実装方法
データベース内のテーブルのフィールドとプロパティをエクスポートし、テーブルを作成してWordに保存す...
目次序文状態DockerをインストールするRedisのマスターノードとスレーブノードを構成する序文以...
1. コンテナにnginxサービスをデプロイするcentos:7 イメージはコンテナを実行し、このコ...
コードをコピーコードは次のとおりです。 <html> <本文> <?p...
CSS には、一般的には使用されない 2 つの疑似クラス、before と :after があります...
高可用性 Web クラスターを実現する Keepalived+Nginx+Tomcat 1. Ngi...
ホスト 'xxxx' はこの MySQL サーバーに接続できませんエラー: 1130...
Dockerはますます普及しています。環境を軽量かつ柔軟に分離し、容量を拡張し、運用保守管理を容易に...
ステップ 1: yum install httpd -y #httpd サービスをインストールします...
1. MySQLが以前にインストールされていたかどうかを確認するコマンド: rpm -qa|grep...
pssh は、多数のマシンでのバッチ ssh 操作に使用される、Python で実装されたオープン ...
MySQL は、スウェーデンの会社 MySQL AB によって開発されたオープンソースの小規模なリレ...
かなり前に実装された機能ですが、クリックすると選択したメニュー項目の背景色が白くなることに気付きまし...
この記事では、ネイティブ JS で実装された均一なモーションを紹介します。その効果は次のとおりです。...
目次概要1. Refsオブジェクトの作成1.1 React.createRef() 1.2React...