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;

我得到了错误

无效的挂钩调用。挂钩只能在功能组件的主体内部调用。发生这种情况可能是由于以下原因之一：

有人可以指出我做错了什么吗？

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。

将转换功能组件转换为类组件

1 个答案: