reactjs - JSX.Element' 不可分配给 React 功能 HOC 中的类型 'ReactNode'

Question

我需要编写 HOC 来将我的组件包装到 Suspense 中，我会将组件和后备作为 HOC 属性传递。

我的项目:

export const withSuspense = ({ Component, Fallback }: any)=> {

  return (props:any) => {
    return (
      <Suspense fallback={<Fallback />}>
        <Component {...props} />
      </Suspense>
    );
  };
};

然后我需要在路由中渲染(react-router v 6.15)

  <Route
    path="messages"
    element={withSuspense({MessagesPage,Loader})}
  />

出现错误类型“(props:any) => JSX.Element”无法分配给类型“ReactNode”。

我尝试将 HOC 属性定义为 ReactNodes，但它不起作用。请问有什么想法吗？

Answer 1

'JSX.Element' is not assignable to type 'ReactNode' in React functional HOC

最新的 react-router-dom 中的

element 需要一个 ReactNode，而不是一个返回 JSX 的函数> 或 ReactNode。

const Component = withSuspense({ MessagesPage, Loader });

<Route
  path="messages"
  element={<Component />}
/>