Question

我做了一个简单的组件：

const CloseButton = ({ onClick }: { onClick: MouseEventHandler }) => {
  const classes = useStyles();
  return <CloseIcon className={classes.closeButtonStyles} onClick={onClick} />;
};

export default CloseButton;

我可以这样打电话：

<CloseButton onClick={handleClose} />

这很好。

但是当我添加一个className属性时，例如：

<CloseButton className={classes.closeButton} onClick={handleClose} />

我得到了错误：

输入'{className：string; onClick：（）=>无效； }'不可分配键入'IntrinsicAttributes＆{onClick：（event：MouseEvent）=> void; }'。属性“ className”不存在于输入'IntrinsicAttributes＆{onClick：（event：MouseEvent）=> void; }'

为什么会出现？为什么className属性与onClick属性混合在一起？

Answer 1

我不确定CloseIcon组件是如何定义的，但是我猜猜道具类型有些不匹配。

请确保CloseIcon的类型别名/接口包括className道具（在onClick方法道具的顶部）：

interface CloseIconProps {
  className: string;
  onClick: () => void;
}

（您也可以选择将className定义为可选字段）

Answer 2

Typescript不知道该函数是React组件。

您可以尝试将React类型添加到组件中，例如而不是const CloseButton =，您应该使用const CloseButton: React.FC<{yourPropsHere: string}> =

React：为什么不能向组件添加自定义样式类？

2 个答案: