TypeScript中传递函数组件为Props的类型标注与渲染方法

你当前代码的核心问题是错误地将icon的类型标注为React.ReactElement——这是组件渲染后生成的元素对象，而非组件本身。要传递可渲染的组件作为Props，需要标注组件类型而非已渲染元素类型。

修正后的完整代码 #

import React from 'react';

function DefaultIcon() {
  return <svg></svg>;
}

// 正确标注icon类型：兼容函数组件、类组件或原生HTML标签名
interface ExampleProps {
  icon?: React.JSXElementConstructor<any>;
}

function Example({ icon = DefaultIcon }: ExampleProps) {
  // 遵循React规范：组件名必须大写开头
  const Icon = icon;
  return (
    <div>
      {/* 问题1解决：React.createElement 可正常调用 */}
      {React.createElement(icon)}
      {/* 问题2解决：直接以组件标签形式渲染 */}
      <Icon />
    </div>
  );
}

问题1：为icon正确标注类型，使React.createElement正常工作 #

• React.createElement的第一个参数要求是组件构造器（函数/类组件）或原生HTML标签字符串（如'div'），而非已渲染的ReactElement对象。
• 正确类型选择：
  • 用React.JSXElementConstructor<any>：涵盖所有自定义组件（函数/类）和原生标签，兼容性最广；
  • 若仅接受自定义函数组件，可使用React.FC<any>；仅接受类组件则用React.ComponentClass<any>。
• 注意：默认值要传入组件本身DefaultIcon，而非渲染后的元素<DefaultIcon />。

问题2：不使用React.createElement时的渲染方式 #

• React的JSX规范要求组件名必须大写开头，因此将传入的icon赋值给大写变量Icon；
• 之后直接用<Icon />的形式渲染，和普通组件调用逻辑一致，TypeScript会自动识别组件类型，不再报错。

扩展：给传入的组件传递Props #

如果需要给传入的组件传递自定义属性，可以泛型化Props类型：

import React from 'react';

function DefaultIcon({ color = 'black' }: { color?: string }) {
  return <svg style={{ color }}></svg>;
}

// 泛型化Props，支持传递组件对应的属性
interface ExampleProps<T = {}> {
  icon?: React.JSXElementConstructor<T>;
  iconProps?: T;
}

function Example<T>({ icon = DefaultIcon, iconProps = {} as T }: ExampleProps<T>) {
  const Icon = icon;
  return (
    <div>
      <Icon {...iconProps} />
    </div>
  );
}

// 使用示例
<Example icon={DefaultIcon} iconProps={{ color: 'red' }} />

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