将 {children} 传递给 NextJS 和 Typescript 中的布局组件

Question

我想为我的主管理界面创建一个组件作为各个屏幕的包装。

本质上是这个 JS 代码：

import Header from '../Header'
  
function TopNavbarLayout({ children }) {
    return (
        <>
            <Header />
            <main>{children}</main>
        </>
    )
}

export default TopNavbarLayout

但在打字稿中。当我尝试时：

import Header from '../Header'

interface Props {
  children: JSX.Element
}

const TopNavbarLayout = ({children} : Props) => {
  return (
    <>
      <Header />
      <main>{children}</main>
    </>
  )
}

export default TopNavbarLayout

我收到 linting 错误，提示需要类型，但 VsCode 似乎无法识别 <> 和 </> 中的任何内容。

有人对我需要做什么来替换 TS 中上面的 JS 组件表单有任何建议吗？

我打算发送的 {children} 是不同的仪表板。

Answer 1

正确的类型children是ReactNode，它是 React 接受的所有类型事物的联合：string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal | null | undefined。（这似乎不支持将数组作为子项，但它支持 via ReactFragment，即Iterable<ReactNode>。）

import { ReactNode } from "react";
// ...
interface Props {
    children: ReactNode;
}

游乐场示例