如何使用rest操作符在React组件中获取事件道具

Question

我需要一些帮助。我是TS的初学者，我不知道如何在我的组件中使用我的事件道具。我定义了两个道具，我需要我所有的活动作为休息道具。

当我在onClick事件中使用我的组件时，我遇到了一个错误。

错误：类型"IntrnsicAttributes&"上不存在属性"onClick"；ButtonProps的

如果你能提供任何帮助，我将不胜感激。

这是我的组件：

export type ButtonProps = {
children: React.ReactNode;
className: string;  
};

export const Button = ({ children, className, ...rest }: ButtonProps) => {
return (
<button className={className} {...rest}>
{children}
</button>
);
};

Answer 1

您可以使用PropsWithChildren:这样做

import { PropsWithChildren } from "react";
export type ButtonProps = {
className: string;  
};

export const Button = ({ children, className, ...rest }: PropsWithChildren<ButtonProps>) => {
return (
<button className={className} {...rest}>
{children}
</button>
);
};