React笔记绕开hook对class的限制

最新推荐文章于 2023-08-16 16:25:27 发布

凯凯本凯

最新推荐文章于 2023-08-16 16:25:27 发布

阅读量471

点赞数

分类专栏： React 笔记文章标签： react.js javascript 前端 typescript react

本文链接：https://blog.csdn.net/kaikai508282737/article/details/127428593

版权

React 笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

发生背景

又是React Router DOM v6的坑。
有个路由是/news/:number，路径参数要通过useParamshook获取，而hook不支持在类组件中使用。
location.href也得用useLocationhook获取，否则提示未声明。

相关代码

/src/pages/news/index.tsx（缩减版）：

class NewsDetail extends React.Component {
  state: NewsDetailState = {
    news: {
      id: "",
      number: "", // number字段是string类型的
      title: "name",
      content: "",
      element: <Spin />
    }
  }
  constructor(props: NewsDetailProps) {
    super(props);
    let state = this.state;
    state.news.number = useParams().id as string;
    state.news.element = (<>
      <Grid.Row justify='center'>
        <Typography.Title heading={ 1 }>{ state.news.title }</Typography.Title>
      </Grid.Row>
      ...
    </>);
    this.setState(state);
  }
  render(): React.ReactNode {
    return (<div><article>
      { this.state.news.element }
    </article></div>);
  }
}
export default NewsDetail;

错误信息

Compiled with problems:

ERROR

[eslint] 
src\pages\news\detail.tsx
  Line 14:25:  React Hook "useParams" cannot be called in a class component. React Hooks must be called in a React function component or a custom React Hook function  react-hooks/rules-of-hooks

解决方案

做一个withRouter通用函数，伪装成组件，取到hook后传给实际组件。
diff（/src/pages/news/index.tsx）：

@@ -11,7 +11,7 @@ class NewsDetail extends React.Component {
   constructor(props: NewsDetailProps) {
     super(props);
     let state = this.state;
-    state.news.number = useParams().id as string;
+    state.news.number = props._params.id;
     state.news.element = (<>
       <Grid.Row justify='center'>
         <Typography.Title heading={ 1 }>{ state.news.title }</Typography.Title>

diff（/src/util/with_router.tsx）：

@@ -0,0 +1,8 @@
+import { useParams } from "react-router-dom";
+function withRouter(Child) {
+  return (props) => {
+    let params = useParams();
+    return <Child { ...props } _params={ params } />;
+  }
+}
+export { withRouter };