javascript - 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)更改为实际类型而不是任何类型，但是当我将其更改为 Layout(children:ReactNode) 时，我在组件的应用页面上收到此警告:

TS2322: Type '{ children: Element; }' is not assignable to type'IntrinsicAttributes | (IntrinsicAttributes & string) |(IntrinsicAttributes & number) | (IntrinsicAttributes & false) |(IntrinsicAttributes & true) | (IntrinsicAttributes &ReactElement<...>) | (IntrinsicAttributes & ReactNodeArray) |(IntrinsicAttributes & ReactPortal)'.   Type '{ children: Element; }'has no properties in common with type 'IntrinsicAttributes'.

那么我应该将其设置为 Layout(children:IntrinsicAttributes) { 是有道理的但是当我这样做时，没有选择导入它。这应该设置成什么？

Answer 1

props是一个对象 - children是 props 内的嵌套字段目的。

interface LayoutProps {
   children: React.ReactNode;
}

function Layout({ children }: LayoutProps) {