React JS子组件MainLayout转TSX时children类型报错解决

• 第一个children隐式具有any类型报错：TypeScript严格模式下，React函数组件的props未声明类型时，解构得到的属性会触发隐式any校验错误。
• 第二个对象不能作为合法React子元素报错：你把参数从解构写法{ children }改成了直接接收children，此时函数拿到的入参是完整的props对象（包含children字段的对象），直接渲染对象本身不符合React的子元素规则，就会触发该报错。
• 手动将children设置为any[]的错误点：children不一定是数组，单个文本、节点、Fragment都属于合法children，数组类型覆盖不全，且使用any本身不符合TS规范。

直接使用React内置的类型定义即可，全程不需要用到any类型，代码如下：

import type { PropsWithChildren } from 'react';
// 替换为你项目中对应组件的实际导入路径
import MainProvider from './你的组件路径/MainProvider';
import TopNavigation from './你的组件路径/TopNavigation';

export default function MainLayout({ children }: PropsWithChildren) {
  return (
    <MainProvider>
      <TopNavigation />
      {/* 原代码className属性为空，请补充你需要的类名 */}
      <main className="">{children}</main>
    </MainProvider>
  );
}

• React函数组件的第一个入参永远是props对象，children是props上的固定属性，必须通过解构{ children }或者props.children的方式获取，不能直接把入参命名为children来使用。
• PropsWithChildren是React内置的工具类型，已经为children属性定义了合法的React.ReactNode类型，覆盖了所有合法的React子元素场景（单个节点、文本、Fragment、节点数组等），不需要手动重复定义类型。
• 如果后续需要给MainLayout增加其他自定义props，只需要给PropsWithChildren传入泛型参数即可，示例：

  type LayoutProps = {
    showNav?: boolean;
    wrapperClass?: string;
  }
  
  export default function MainLayout({ children, showNav = true, wrapperClass }: PropsWithChildren<LayoutProps>) {
    // 组件逻辑
  }
  

内容的提问来源于stack exchange，提问作者Barty