React children 應該設置為什么 TypeScript 類型？

Question

這是我的布局：

export default function Layout(children:any) {
  return (
    <div className={`${styles.FixedBody} bg-gray-200`}>
      <main className={styles.FixedMain}>
        <LoginButton />
        { children }
      </main>

      <footer>
        <FooterNavigation />
      </footer>
    </div>
  )
}

而我的應用程序：

function MyApp({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  )
}

為了使我的代碼更簡潔，我想將Layout(children:any)設置為實際類型而不是 any，但是當我將其更改為Layout(children:ReactNode)時，我在組件上的應用程序頁面上收到此警告：

TS2322: 類型 '{children: Element; }' 不可分配給類型 'IntrinsicAttributes | (IntrinsicAttributes & string) | (IntrinsicAttributes & number) | (IntrinsicAttributes & false) | (IntrinsicAttributes & true) | (IntrinsicAttributes & ReactElement<...>) | (IntrinsicAttributes & ReactNodeArray) | (IntrinsicAttributes & ReactPortal)'。 類型'{孩子：元素; }' 與類型 'IntrinsicAttributes' 沒有共同的屬性。

那么我應該將它設置為Layout(children:IntrinsicAttributes) {但是當我這樣做時沒有選擇導入它是有道理的。 這應該設置成什么？

Answer 1

props是一個對象 - children是props對象內的嵌套字段。

interface LayoutProps {
   children: React.ReactNode;
}

function Layout({ children }: LayoutProps) {

Answer 2

React 的類型有一個你可以使用的PropsWithChildren類型：

function Layout({ children }: React.PropsWithChildren<{}>) {
    // ...
}

正如其他人所說，它的類型為：

children?: ReactNode;