React TypeScript下自定义JSX组件触发TS622参数识别异常排查

这个问题的本质是自定义组件的函数签名完全不符合React JSX的固定调用约定：

• React 所有函数组件的调用逻辑由JSX编译层的React.createElement统一处理，其传参规则是固定的：最多只会给函数组件传入两个入参，第一个是「所有JSX标签上传入的属性打包成的props对象」，第二个是可选的上下文context值。
• 你当前定义的TheBarTitle组件，将theClass、columnTitle、onClickAction拆成了三个独立的顶层函数入参，完全没有匹配上述传参规则：JSX编译时根本不会把标签上的三个属性拆成独立参数逐个传入组件，只会把它们打包成单个props对象传递，和你定义的3参数函数签名完全不匹配，TypeScript才会抛出对应报错。
• 常见认知误区：很多开发者会惯性把React组件当成普通纯函数，把需要的参数拆成独立的函数入参，但JSX的属性传递机制从设计上就不支持这种写法，所有属性都会被统一收拢为props对象传入。

只需要调整组件的函数签名，按照标准规则接收props即可，你之前写的JSX调用代码不需要做任何改动：

1. 为组件定义明确的props类型，将原本的三个独立入参收拢为props对象的属性
2. 在组件内部对props做解构，拿到需要的三个值

调整后的组件示例代码：

// 定义组件接收的props类型
interface TheBarTitleProps {
    theClass: any;
    columnTitle: string;
    onClickAction: (e: any) => void;
}

// 调整函数签名，接收单个props对象作为入参
const TheBarTitle = (props: TheBarTitleProps) => {
    const { theClass, columnTitle, onClickAction } = props;
    return (
        <div
            className={theClass}
            title="Click to add this filter"
            onClick={onClickAction}
        >
            {columnTitle}
        </div>
    );
};

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