React 将函数组件转换为类组件

Question

我正在使用 react react-i18next 包进行语言翻译。

我拥有的功能组件正常工作，没有任何错误

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

function MyComponent() {
  const { t, i18n } = useTranslation();

  return (<Suspense fallback="loading">
           <h1>{t('Welcome to React')}</h1>
          </Suspense>);
}

export default MyComponent;

当我尝试将其转换为如下类时

import React, { Component, Suspense } from 'react';
import { useTranslation } from 'react-i18next';

class MyComponent extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        const { t, i18n } = useTranslation();
        return (
        <Suspense fallback="loading">
            <h1>{t('hello')}</h1>
        </Suspense>
        );
    }
}

export default MyComponent;

我得到了错误

无效的挂钩调用。钩子只能在 >function 组件的主体内部调用。这可能是由于以下原因之一：

谁能指出我做错了什么？

Answer 1

useTranslation 是一个hook，只能从基于function 的组件中调用。对于基于class 的组件，请使用HOC

import { withTranslation } from 'react-i18next';

class Comp extends Component{
    render(){
        const { t, i18n } = this.props

        return <SomeJSX />
    }
}

export default withTranslation()(Comp)

注意您也可以在功能组件中使用withTranslation。