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