在返回方法中使用导入函数（无效的钩子调用，react js）

Question

伙计们，

我有一个可重用的组件，它通过将键名作为字符串或绑定的 var 将键翻译成一种选择的语言。

通常我为此使用标签，但由于不同的原因，我将当前翻译切换/替换为 {t('...')}。

这是组件的代码：

import React from 'react';

import { useTranslation as defaultTranslation } from 'react-i18next';

import i18next from 'i18next';

export const useTranslation = (ns = 'common', options) => {

  return defaultTranslation(ns, {

    useSuspense: false,

    ...options,

  });

};

export const withTranslation = (Component, ns, options) => {

  const TranslatedHOC = (props) => {

    const translationProps = useTranslation(ns, options);

    return <Component {...translationProps} {...props} />;

  };

  return TranslatedHOC;

};

export const getCurrentLanguage = () =>

  i18next.language || localStorage.getItem('language') || 'de-DE';

首先，我为使用的导入函数定义常量：

const {t} = useTranslation();

正常情况：在文件中导入我的组件，我想在其中使用它并在上面添加代码。

我的组件代码，我想在其中替换标签。

// Import React Table

import ReactTable from 'react-table';

import 'react-table/react-table.css';

import LocalizedText from '@components/i18n/LocalizedText';

class T extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      data: [],

      pages: null,

      loading: true,

    };

    this.fetchData = this.fetchData.bind(this);

  }

  fetchData(state, instance) {

    this.props.onFetchData(state, instance).then(() => {

      this.setState({

        loading: false,

      });

    });

  }

  render() {

    return (

      <ReactTable

        {...this.props}

        previousText={

          <LocalizedText textKey="caseoverview.orderproduct.back" />

        }

问题是，我无法使用上面引用的代码而不会遇到任何有关无效挂钩调用的问题。如果我以某种方式将其移出，则会收到错误消息，告诉我我的“t”未定义或意外标记。有人可以帮帮我吗？在线搜索解决方案没有任何结果。

Answer 1

钩子只能在功能组件中使用。您可以将此类组件更改为功能组件，或者您可以使用react-i18next的withTranslationHOC 来包装您的类组件。

Answer 2

使用 withTranslation 并传递t作为propconst {t} = this.props;渲染方法内部对我有用。