reactjs - 在 HOC 中使用带有传递参数的反应钩子

Question

我正在尝试创建 HOC 并在内部使用自定义反应钩子。此外，为了使用钩子，我需要将 paras 传递给 HOC，但我只在函数体中使用钩子时出现错误。我的 HOC 是：

export const withUseAxisTranslate = (props) => {
  const [t] = useAxisTranslate(props.namespace);
  return (WrappedComponent) => (moreProps) => <WrappedComponent {...moreProps} t={t} />;
};

我的 useAxisTranslate 看起来像：

import { useSelector } from 'react-redux';
import { useTranslation } from 'react-i18next';

//This one is behave like regular i18 translate
//It returns like t() in array function and use axis name in order to find specific key by axis name
const useAxisTranslate = (namespace) => {
  return [
    (stringToTranslate) => {
      const axisName = useSelector((state) => state.axisConfig.axis.name.toLowerCase());
      const [t] = useTranslation(namespace);
      return t(`${axisName}.${stringToTranslate}`);
    },
  ];
};

export default useAxisTranslate;

我的呼吁是：

compose(
  withWidth(),
  withUseAxisTranslate({ namespace: 'header' }),
)(MyComponent);

我得到的错误是：

我不知道为什么会出现此错误，因为我在这里不使用类 感谢您的帮助

Answer 1

这里有几点需要注意

• 您正在尝试使用useAxisTranslatewhich 是一个自定义钩子，withUseAxisTranslate其中不是组件，而是返回另一个函数的函数。
• 您正在使用返回函数内部useSelector的useTranslation自定义钩子，这再次违反了规则

这里的解决方案是纠正以下两个问题

export const withUseAxisTranslate = (props) => {
  return (WrappedComponent) => (moreProps) => {
        const [t] = useAxisTranslate(props.namespace);
        return <WrappedComponent {...moreProps} t={t} />
  }
};

并使用AxisTranslate 作为

const useAxisTranslate = (namespace) => {
  const axisName = useSelector((state) => state.axisConfig.axis.name.toLowerCase());
  const [t] = useTranslation(namespace);
  const translateFunction = (stringToTranslate) => {
      return t(`${axisName}.${stringToTranslate}`);
  };
  return [
    translateFunction
  ];
};

Answer 2

尝试useAxisTranslate在组件主体内移动钩子，像这样

export const withUseAxisTranslate = (props) => {
    return (WrappedComponent) => (moreProps) => {
        const [t] = useAxisTranslate(props.namespace);
        return <WrappedComponent {...moreProps} t={t} />;
    }
};