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

Question

我正在使用 reactreact-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在功能组件中使用。