无法在类组件中调用React Hook "useTranslation“

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

const withTranslation = (Component) => {
  return class extends React.Component {
    render() {
      const { t } = useTranslation();
      return <Component {...this.props} t={t} />;
    }
  };
};

class MyComponent extends React.Component {
  render() {
    const { t } = this.props;
    return <div>{t('hello')}</div>;
  }
}

export default withTranslation(MyComponent);

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

class TranslationProvider extends React.Component {
  render() {
    const { t } = useTranslation();
    return this.props.children(t);
  }
}

class MyComponent extends React.Component {
  render() {
    return (
      <TranslationProvider>
        {({ t }) => <div>{t('hello')}</div>}
      </TranslationProvider>
    );
  }
}

export default MyComponent;

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

const MyComponent = () => {
  const { t } = useTranslation();
  return <div>{t('hello')}</div>;
};

export default MyComponent;