reactjs - React/Typescript - 至少需要 '3' 参数，但 JSX 工厂 'React.createElement' 最多提供 '2' 。 TS622

Question

我有这个组件:

const TheBarTitle = (
    theClass: any,
    columnTitle: string,
    onClickAction: any,
) => {
    return (
        <div
            className={theClass}
            title="Click to add this filter"
            onClick={onClickAction}
        >
            {columnTitle}
        </div>
    );
};

这是这样使用的:

 render: (rowData): any => {
                                return (
                                    <div className={classes.contentxyz}>
                                        .........                                    </div>
                                );
                            },
                        },
                        {
                            title: (
                                <TheBarTitle
                                    theClass={classes.contentxyz}
                                    columnTitle="THIS IS THE TITLE"
                                    onClickAction={(e: any) =>
                                        this.handleTooltip(
                                            e,
                                            'theeetitle:',
                                        )
                                    }
                                />
                            ),

....

但是我收到错误: Tag 'TheBarTitle' expects at least '3' arguments, but the JSX factory 'React.createElement' provides at most '2'. TS622我实际上使用了 3 个参数。知道我做错了什么，它只看到 2 个吗？

Answer 1

您正在将函数调用与组件创建方法混合在一起。
更改 TheBarTitle到 FunctionComponent 创建方法

interface Props {
  theClass: any
  columnTitle: string
  onClickAction: any
}
const TheBarTitle: React.FC<Props> = ({theClass, columnTitle, onClickAction}) => {
  return (
    <div
      className={theClass}
      title="Click to add this filter"
      onClick={onClickAction}
    >
      {columnTitle}
    </div>
  )
}

或者你对这个函数的调用:

title: TheBarTitle(classes.contentxyz, "THIS IS THE TITLE", (e: any) =>
    this.handleTooltip(e, 'theeetitle:')
    ))

对于后者，我建议也更改命名的大小写。