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

Question

我是 React 和 TypeScript 的新手。

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

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

export default CloseButton;

我现在希望能够使用classNameas props 传递这个组件样式，所以我添加了：

interface CloseButtonProps {
  className?: string;
}

但我不确定如何添加className到组件中。

通常我会这样做

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

但我不确定如何与onClick上述内容一起执行此操作。

有人知道如何最好地做到这一点吗？

标签： javascriptreactjstypescript

Answer 1

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


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