在 HOC 中使用 react hook 和传递的参数

Question

我正在尝试创建 HOC 并在其中使用自定义反应挂钩。同样为了使用钩子，我需要将参数传递给 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

尝试将 useAxisTranslate 钩子移动到组件体内，就像这样

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

Answer 2

这里有几点需要注意

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

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

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

并使用AxisTranslate as

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
  ];
};

在 HOC 中使用 react hook 和传递的参数

Use react hook in HOC with passed params

reactjs

react-hooks

react-hoc