如何扩展包装好的 React.Component 类？

Question

我一直在关注 this answer 以将重定向功能添加到我一直在处理的 React 项目中。

我有一个班级，目前由其他几个班级扩展；这个父类当前扩展React.Component：

class LoginForm extends Form {
   ...
}

export default LoginForm;

class Form extends React.Component {
   ...
   ...
}

export default withRouter(Form); 

在我在组件上添加这个 withRouter 功能之前，它工作正常。我现在在页面加载时出现以下错误：

Login.js:8 Uncaught TypeError: Class extends value props => {
    _s();
    const params = (0,react_router_dom__WEBPACK_IMPORTED_MODULE_2__.useParams)();
    cons...<omitted>... } is not a constructor or null
    at ./src/pages/Forms/Auth/Login.js (Login.js:8:1)

包装类导出的代码是：

const withRouter = Wrapper => props => {
    const params = useParams();
    const navigate = useNavigate();
 
    return (
        <Wrapper
            {...props}
            navigate={navigate}
            params={params}
        />
    )
}

export default withRouter;

我需要做什么才能继承这个类？我不想重构整个站点以使用功能组件，但我们正在使用 Router V6 - 我知道使用 hook 是必要的。有没有办法将属性注入更高的位置来完成这项工作？

Answer 1

能够扩展用 withSomething 包裹的东西的唯一方法是让 withSomething 返回一个类组件。

因此，您将无法在 withSomething 函数中使用任何 useSomething 挂钩。

在不进行任何重大重构的情况下，您应该从基类继承，然后在继承的类上使用 withRouter。

或者，您可以返回 React Router v5 并使用他们的 withRouter HOC

Answer 2

它已被弃用。您可以像这样使用 hooks 版本重新创建它：

import {
  useLocation,
  useNavigate,
  useParams
} from "react-router-dom";

function withRouter(Component) {
  function ComponentWithRouterProp(props) {
    let location = useLocation();
    let navigate = useNavigate();
    let params = useParams();
    return (
      <Component
        {...props}
        router={{ location, navigate, params }}
      />
    );
  }

  return ComponentWithRouterProp;
}

更多详情，check here