响应从类到功能组件的调用。错误：无效的挂钩调用。 Hooks 只能在函数组件的主体内部调用

Question

我正在从类组件中调用功能组件。 这是我的功能组件，

import React, { useState, useEffect } from "react";
import {useNavigate} from "react-router";

const UtilsExt = () => {
    const navigate = useNavigate();
    navigate('/');

};

export default UtilsExt;

我从类组件的按钮单击事件中调用上面。当我这样做时，我会收到此错误。

错误：无效的挂钩调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一：

1. 您的 React 和渲染器版本可能不匹配（例如 React DOM）
2. 您可能违反了 Hooks 规则
3. 您可能在同一个应用中拥有多个 React 副本

Answer 1

React 钩子只能在函数组件或自定义 React 钩子中调用。为了使用navigate 函数，您需要创建一个包装器组件或自定义withNavigate HOC 以将navigate 作为道具传递给您的类组件。

包装器

const MyComponentWithNavigation = props => {
  const navigate = useNavigate();

  return <MyClassComponent {...props} navigate={navigate} />;
};

用法：

<Route path="..." element={<MyComponentWithNavigation />} />

HOC

const withNavigate = Component => props => {
  const navigate = useNavigate();

  return <Component {...props} navigate={navigate} />;
};

用法：

const MyComponentWithNavigation = withNavigation(MyClassComponent);

...

<Route path="..." element={<MyComponentWithNavigation />} />

访问navigate 函数

在你的类组件中，从 props 访问navigate。

this.props.navigate("/");