React中如何渲染作为props对象属性传入的自定义组件

控制台抛出no call signatures报错+自定义组件无法渲染，由两个问题共同导致：

• 类型定义不匹配：如果你的TableCellProps中把TitleComponent标注为可调用的组件类型（比如React.ComponentType、() => JSX.Element），但实际传入的是已经实例化完成的JSX元素（<CustomComponent {...props} />的返回值本质是普通JS对象，不是可调用的函数/类），TypeScript会检测到类型冲突，抛出无调用签名错误。
• 渲染逻辑缺失：当前TableCell的非表头分支只渲染了title字段，完全没有处理TitleComponent的渲染逻辑，就算类型正确，普通单元格传入的自定义组件也不会显示。

选择和你的传参习惯匹配的方案修改即可，第一种改动量最小，完全适配你当前的调用写法。

方案1：保留当前传参写法（推荐） #

直接调整类型定义+补全渲染逻辑，不需要修改现有Table调用代码：

import type { ReactNode } from 'react';

// 修正TitleComponent的类型定义
type TableCellProps = {
  isHeader?: boolean;
  title?: ReactNode;
  TitleComponent?: ReactNode;
  position?: 'left' | 'center' | 'right';
  // 其余原有props类型保持不变
}

const defaultPosition = 'left';

const TableCell = ({ isHeader = false, title, TitleComponent, position = defaultPosition, ...props }: TableCellProps ) => {
    // 统一处理单元格渲染内容，避免重复判断
    const cellContent = TitleComponent ?? title;
    
    if (isHeader) {
        return (
            <TableHeaderComponent position={position} {...props}>
                {cellContent}
            </TableHeaderComponent>
        );
    }
    return (
        <TableCellComponent position={position} {...props}>
            {cellContent}
        </TableCellComponent>
    );
};

修改完成后自定义组件即可正常渲染，TS报错也会消失。

方案2：传组件引用而非实例 #

如果你希望TitleComponent接收组件本身（支持内部动态控制组件渲染时机），则需要同时修改传参方式和渲染逻辑：

1. 调用Table时直接传入组件引用，不要提前用JSX实例化，组件需要的props单独通过字段传递：

cells={[
  [
    // 直接传组件函数/类引用，不要加< />
    { TitleComponent: CustomComponent, componentProps: {...props} },
    { title: 'Center Aligned', position: 'center' },
    { title: 'Right Aligned', position: 'right' },
  ],
]}

2. 调整TableCell的类型定义和渲染逻辑：

import type { ComponentType, ReactNode } from 'react';

type TableCellProps = {
  isHeader?: boolean;
  title?: ReactNode;
  TitleComponent?: ComponentType<any>;
  componentProps?: Record<string, any>;
  position?: 'left' | 'center' | 'right';
}

const defaultPosition = 'left';

const TableCell = ({ isHeader = false, title, TitleComponent, componentProps = {}, position = defaultPosition, ...props }: TableCellProps ) => {
    const cellContent = TitleComponent 
      ? <TitleComponent {...componentProps} />
      : title;
    
    if (isHeader) {
        return (
            <TableHeaderComponent position={position} {...props}>
                {cellContent}
            </TableHeaderComponent>
        );
    }
    return (
        <TableCellComponent position={position} {...props}>
            {cellContent}
        </TableCellComponent>
    );
};

这种写法下TitleComponent是可调用的组件类型，也不会触发无调用签名报错。

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