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

Question

我一直在关注这个答案，以便将重定向功能添加到我一直在处理的React项目中。

我有一个 class，目前由其他几个班级扩展； 这个父 class 当前扩展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)

包装 class 出口的代码是：

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

export default withRouter;

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

Answer 1

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

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

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

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

Answer 2

用于包装 class 导出的代码已弃用。 您可以像这样使用 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;
}

或者也可以随意写成带箭头的function：

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

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

  return ComponentWithRouterProp;
}

有关更多详细信息， 请查看此处

最后，将您的表单组件导入到 loginForm 中，例如import Form from './Form' into your LoginForm class component instead

将您的 LoginForm 代码更改为类似以下内容：

import Form from './Form'
class LoginForm extends React.Component {
   ...
   // do something in your parent class
   <Form />

}

export default LoginForm;

因此你也应该考虑管理状态。