react-i18nextのuseTranslationをTranslationコンポーネントに書き換えた話

ドキュメントを上から読んでいって、まずは普通に useTranslation(); で実装しようとしました。
(i18nextのinitは別のとこでやってるので省略)

useTranslation();

まずは親になるMyComponentがこちら

import React from 'react';
import MyChild from './my_child';

export default class MyComponent extends React.Component {
  render() {
    <MyChild />
  }
}

上でimportした MyChildがこいつ

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

export default class MyChild extends React.Component {
  render() {
    const { t, i18n } = useTranslation();

    return(
      <p>{t('my_text')}</p>
    );
  }
}

で、実行すると

Uncaught Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

renderの中で呼び出されたclassの中で使えないぽい?

Translationで書き換え

MyChildを書き換えます。

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

export default class MyChild extends React.Component {
  render() {
    return(
      <Translation>
        {(t) => <p>{t('my_text')}</p>}
      </Translation>
    );
  }
}

これでエラーがでなくなりましたとさ。

参考

Introduction – react-i18next documentation

返信を残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください