时间戳

首页 > 解决方案 > 如何处理 TS React 项目中的意外道具？

reactjs - 如何处理 TS React 项目中的意外道具？

问题描述

例如，我有一个自定义按钮组件。

<button type={type} className={classes} {...props}>
  {!!children && <span>{children}</span>}
</button>

我通过了其他我不想用破坏来预测的道具。但是当我尝试传递时，TS 会抛出一个错误，例如，disabled prop 因为它没有在 TS 接口中定义。

有什么办法可以解决这个问题吗？或者唯一的方法是在界面中定义所有可能的优点？

标签： reactjstypescript

解决方案

对于您的特定情况，您的自定义按钮道具可以扩展 HTML 按钮道具

interface MyButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  children: React.ReactNode;
}

function MyButton({ children, ...props }: MyButtonProps) {
  return <button {...props}>{children}</props>
}

推荐阅读