在 Next.js 中使用 withRouter HOC 扩展 props

Question

我正在尝试在 Next.js 库中使用 withRouter HOC 助手。

import { withRouter } from 'next/router'

const MyComponent = withRouter(({ router }) => ())

这给出了流程错误：

[flow] property `router` is missing in props [1]. (References: [1])

即使我为 Next.js 安装了流类型并且 withRouter 函数具有以下签名：

withRouter: < T > (Component: React$ComponentType < (T & {
  router: Router
}) > ) => class React$Component

我以为flow会算出router是由withRouter注入的，但好像不是这样？如何修复此类型错误？

我尝试导入 Router 类型并将其声明为 prop:

import { Router } from 'next/router'

type Props = { router: Router }
const MyComponent = withRouter(({ router: Router }: Props) => ())

这消除了错误，但现在我得到了一个不同的错误：

Property router is missing in props [1] but exists in object type [2].

 [1] 61│         {typeof query.post !== 'undefined' && <Post />}

 [2] 29│ const Basic = withRouter(({ router }: { router: Router }) => (

Answer 1

尝试将 withRouter 的类型调整为：

withRouter: <T: {}>(
  React$ComponentType<{
    ...$Exact<T>,
    router: Router,
  }>,
) => React$ComponentType<T>

并且在您的组件文件中，您必须使用外部 props 来转换增强基础组件的结果，现在我只是放置一个空对象。

const MyComponent = ({ router }) => (/* some jsx */)


export default (withRouter(MyComponent): React$ComponentType<{}>)

Answer 2

好的，我想我明白了。

withRouter 是一个用泛型类型化并用 T 参数化的函数。

流程文档中有一节是关于泛型的：https://flow.org/en/docs/types/generics/。

调用此类函数的一种方法是在调用时传入 T 类型：

import { withRouter } from 'next/router'
import type { Router } from 'next/router'

type Props = {}

type PropsWithRouter = Props & {
  router: Router
}

const MyComponent = withRouter<Props>(({ router }: PropsWithRouter) => ())

这样就通过了flowtype的检查，在调用处不用传入Router就可以使用组件了。

在 Next.js 中使用 withRouter HOC 扩展 props

Extending props with the withRouter HOC in Next.js

javascript

flowtype

next.js