Question

我是React和TypeScript的新手。

我已经创建了一个简单的组件，

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

export default CloseButton;

我现在希望能够以className作为道具来传递此组件样式，因此我添加了：

interface CloseButtonProps {
  className?: string;
}

但是我不确定如何向组件添加className。

通常我会这样做

const CloseButton = ({ className }: CloseButtonProps) => {

但是我不确定如何与上面的onClick一起使用。

有人会知道如何做到最好吗？

Answer 1

interface CloseButtonProps {
  className?: string;
  onClick?: (e:React.MouseEvent<any>) => void;
  /* You can add another props  here */
}


const CloseButton = ({ className, onClick }: CloseButtonProps) => {
  ...
}

Answer 2

只需将两个道具组合成一个界面即可

interface CloseButtonProps
{
    className?: string
    onClick: MouseEventHandler
}

const CloseButton = ({ className, onClick }: CloseButtonProps) =>
{
    // However you plan on integrating className
}

export default CloseButton

向已经具有onClick功能的组件添加道具？

2 个答案: