使用FunctionComponent无法获取children？UI按钮组件类型定义求助

首先明确：必须为函数组件定义Props类型，这是TypeScript的规范要求，也是避免类型错误的核心手段。针对你遇到的children属性不存在的报错，有两种标准解决方式：

方式一：利用FunctionComponent（FC）的内置children类型 #

FC类型本身已内置children?: React.ReactNode的定义，只要将你的自定义Props与FC结合，就能自动获得children的类型支持。

示例代码：

import React, { FunctionComponent } from 'react';

// 定义按钮专属的自定义属性
interface MyButtonProps {
  size?: 'small' | 'medium' | 'large';
  disabled?: boolean;
}

// 将FC与自定义Props绑定，children会被自动包含
const MyButton: FunctionComponent<MyButtonProps> = ({ children, size = 'medium', disabled }) => {
  return (
    <button className={`btn btn-${size}`} disabled={disabled}>
      {children}
    </button>
  );
};

export default MyButton;

方式二：手动在Props接口中声明children #

如果不想依赖FC的内置类型（比如不需要FC附带的其他隐含属性），可以直接在自定义Props里显式定义children的类型：

示例代码：

import React from 'react';

interface MyButtonProps {
  size?: 'small' | 'medium' | 'large';
  disabled?: boolean;
  // 显式声明children类型，ReactNode涵盖所有可渲染内容（文本、组件、数组等）
  children?: React.ReactNode;
}

// 普通函数组件写法，无需FC包裹
const MyButton = ({ children, size = 'medium', disabled }: MyButtonProps) => {
  return (
    <button className={`btn btn-${size}`} disabled={disabled}>
      {children}
    </button>
  );
};

export default MyButton;

报错原因说明 #

你之前的代码应该是仅定义了MyButtonProps但未与FC关联，也没有手动声明children字段，TypeScript无法识别该属性，因此抛出类型错误。

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