12

複雑なReactアプリケーションの多言語サポートについて質問があります。すべての例とドキュメントは、ネストされた/子コンポーネントのない「フラット」アプリケーションに基づいています。

次のようにネストされたデータにアプローチする方法:

<i18n>
    <App>
        translate('base')(
          <Base>
              <Child1 />
              <Child2 />
              {t('Hello')}
          </Base>
        )
    </App>
</i18n>

すべての子コンポーネントをtranslateHOC でラップする必要がありますか? 翻訳機能を子コンポーネント
に渡す他の方法はありますか?

4

4 に答える 4

1

React コンポーネントをコーディングするときに (私のような) クラスではなくhooksを使用している場合は、useTranslationフックを使用できます。

import React from 'react';
import { useTranslation } from 'react-i18next';

export function MyComponent() {
  const { t, i18n } = useTranslation();
  // or const [t, i18n] = useTranslation();

  return <p>{t('my translated text')}</p>
}

これは、withTranslationラッパーと同様に、翻訳を使用するすべてのファイルでインポート (フック) が必要です。

于 2019-08-20T07:33:01.797 に答える