故障排除备忘录呼叫React＆＃x2B;打字稿

Question

我需要你的帮助。最近开始学习Typescript，遇到了一个React问题。 我尝试用 React.memo() 包装我的路由器。像这样：

export const Router = React.memo<RouterPropsInterface>(({ isAuth }) => {

  if (!isAuth) {
      return (
          <Suspense fallback={<Loader text={""}/>}>
              <Routes>
                  <Route path={'/'} element={<LoginPage/>}/>
                  <Route path={'*'} element={<LoginPage/>}/>
                  <Route path={'register'} element={<RegisterPage/>}/>
              </Routes>
          </Suspense>
      )
  }

  return (
      <Suspense fallback={<Loader text={""}/>}>
          <Routes>
              <Route path={'create'} element={<AddCard/>}/>
              <Route path={'posts'} element={<UsersList/>}/>
              <Route path={'/'} element={<Home/>}/>
              <Route path={"*"} element={<Home/>}/>
          </Routes>
      </Suspense>

  )
});

我的 RouterPropsInterface 看起来像这样：

export interface RouterPropsInterface {
    isAuth: boolean,
}

但在这种情况下，我还有其他问题：

src/routers/Router.tsx
  Line 12:23:  Component definition is missing display name  react/display-name
  Line 12:59:  'isAuth' is missing in props validation       react/prop-types

"react": "^17.0.2", "typescript": "^4.6.2"

我不想添加 eslint-disablers，只是想了解我做错了什么。

谢谢！

Answer 1

当使用 React.memo 包装组件时，React 不再推断 displayName 属性。所以，你需要这样设置。

export const Router = React.memo(({ isAuth }) => {...}
Router.displayName = "Router"

关于 prop 类型，您可以通过添加 prop 类型来满足这一点，如下所示：

export const Router = React.memo(({ isAuth }: {isAuth: RouterPropsInterface }) => {...}