React使用children时报错Binding element 'children' implicitly has an 'any' type如何解决

这是TypeScript类型校验抛出的错误，项目开启了noImplicitAny规则（大部分React+TS项目模板会默认开启该规则），你没有给组件的props定义类型，解构得到的children属性被推断为any类型，触发了校验规则。

• 方案1：使用React内置的FC类型 （最常用，推荐） #

React.FC（全称FunctionComponent）的泛型定义默认包含了children属性的类型声明，直接给组件标注该类型即可：

import React, { FC } from 'react';
// 保留useStyles、Grid等原有导入

const ResponsiveContainerGrid: FC = ({ children }) => {
  const classes = useStyles();

  return (
    <div>
      <Grid
        className={classes.root}
        container
        direction="row"
        justifyContent="center"
        alignItems="center"
      >
        {children}
      </Grid>
    </div>
  );
};

export default ResponsiveContainerGrid;

如果组件存在其他自定义props，可以将自定义props的类型作为泛型传入FC，示例：FC<{ customProp: string }>。

• 方案2：手动声明props类型 #

如果不想使用FC类型，可以手动定义props的类型，将children标注为React.ReactNode类型即可：

import React from 'react';
// 保留原有其他导入

// 定义props类型
type ResponsiveContainerGridProps = {
  children: React.ReactNode;
  // 其余自定义props可在此处添加
};

const ResponsiveContainerGrid = ({ children }: ResponsiveContainerGridProps) => {
  const classes = useStyles();

  return (
    <div>
      <Grid
        className={classes.root}
        container
        direction="row"
        justifyContent="center"
        alignItems="center"
      >
        {children}
      </Grid>
    </div>
  );
};

export default ResponsiveContainerGrid;

也可以使用React内置的PropsWithChildren工具类型简化声明，无需手动书写children字段：

type ResponsiveContainerGridProps = React.PropsWithChildren<{
  // 此处仅需填写自定义props，children会自动注入到类型中
}>;

• 方案3：临时绕过校验 （不推荐） #

如果仅用于临时调试不想补充类型，可以显式将children标注为any类型绕过报错：

const ResponsiveContainerGrid = ({ children }: { children: any }) => {
  // 组件原有逻辑保持不变
};

也可以直接给整个props对象标注为any：

const ResponsiveContainerGrid = ({ children }: any) => {
  // 组件原有逻辑保持不变
};

该方案会丢失类型校验能力，仅建议临时调试使用。

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