將 {children} 傳遞給 NextJS 中的布局組件 & Typescript

Question

我想為我的主管理界面創建一個組件作為各個屏幕的包裝器。

基本上這個 JS 代碼：

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

export default TopNavbarLayout

但是在 Typescript 中。當我嘗試時：

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 string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal | null | undefined string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal | null | undefined 。 （這似乎不支持 arrays 作為孩子，但它通過ReactFragment ，它是Iterable<ReactNode> 。）

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

游樂場示例