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:')
    ))

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

Answer 2

对上一条的补充回答：

const TheBarTitle = (
    theClass: any,
    columnTitle: string,
    onClickAction: any,
) => {
    return ( ... );
};

对于组件：括号之间是我们提供给函数的参数，而 React 只期望 2 个可能的值（对象）==> 因此没有像上面引用的参数那样的值）

• props：作为一个对象
• 孩子？：作为非强制性对象

你想做的是使用：

• React 提供的 props 参数是为了使用点符号访问你的 props，
• 要么解构以立即访问您的道具（==>在带有大括号的括号之间，您可以在其中访问您的道具）

本来应该是：

interface Props {
  theClass: any
  columnTitle: string
  onClickAction: any
}

// Regular 
const TheBarTitle = ( props: Props ) => {
  const { ... } = props // or props.[YOUR PROPS] to access your named props
  return ( ... );
};

// Destructuring version 
const TheBarTitle = ({
    theClass,
    columnTitle,
    onClickAction,
} : Props ) => { return ( ... ); };