如何让React Button组件仅接受自定义IconInterface类型作为icon属性？

错误原因 #

你混淆了组件类型和组件实例类型：

• IconInterface 是函数组件类型（返回JSX.Element的函数），代表图标组件本身；
• ReactElement 是组件渲染后的实例对象（比如 <BarChart /> 才是ReactElement）。
  直接把图标组件（函数）赋值给类型为ReactElement的icon属性，自然会触发TypeScript类型不匹配错误。

正确实现方式 #

要让Button仅接受自定义图标组件，需调整ButtonProps的icon类型为你的IconInterface，而非ReactElement，并在Button组件内正确渲染该图标组件。

1. 修正ButtonProps类型

import IconInterface from "./IconInterface";
import { IconProps, CaretProps, CheckboxProps } from "./IconProps";

interface ButtonProps {
  // 仅接受自定义图标组件类型
  icon?: IconInterface;
  // 可选：给图标传递的props
  iconProps?: IconProps | CaretProps | CheckboxProps;
  // 其他按钮属性...
}

2. 在Button组件中渲染图标

将接收的图标组件作为React组件渲染（注意变量名首字母大写，符合React组件命名规范）：

import React from "react";

const Button = ({ icon: Icon, iconProps, children, ...rest }: ButtonProps) => {
  return (
    <button {...rest}>
      {/* 渲染自定义图标组件 */}
      {Icon && <Icon {...iconProps} />}
      {children}
    </button>
  );
};

export default Button;

3. 使用示例

import BarChart from "./BarChart";
import Button from "./Button";

const App = () => {
  return (
    <Button icon={BarChart} iconProps={{ color: "#1890ff", size: 20 }}>
      统计
    </Button>
  );
};

额外说明 #

如果你的需求是允许传入已渲染好的图标元素（比如<BarChart />），同时限制为自定义图标类型，可以调整ButtonProps的icon类型为：

interface ButtonProps {
  icon?: IconInterface | ReturnType<IconInterface>;
  // 其他属性...
}

但这种方式会放宽类型限制，若严格要求仅接受自定义图标组件，优先使用第一种方案。

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