Typescript 如何将所有props传递给React中的组件

<button className="border bg-purple-600 rounded-lg text-white px-2 py-1 mb-4" onClick={handleClick}>
  Add Item
</button>

function Button({
  children,
  ...props
}: {
  children: React.ReactNode;
  props?: any;
}) {
  return (
    <button
      className="border bg-purple-600 rounded-lg text-white px-2 py-1 mb-4"
      {...props}
    >
      {children}
    </button>
  );
}

<Button onClick={handleClick}>
   Add Item
</Button>

import type { ButtonHTMLAttributes } from "react";

function Button({
  children,
  ...props
}: ButtonHTMLAttributes<HTMLButtonElement>) {
  // ...
}

<button
  {...props}
  className="border bg-purple-600 rounded-lg text-white px-2 py-1 mb-4"
>
  {children}
</button>

type ButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "className">;

function Button({
  children,
  ...props
}: ButtonProps) {
  return (
    <button
      className="border bg-purple-600 rounded-lg text-white px-2 py-1 mb-4"
      {...props}
    >
      {children}
    </button>
  );
}

Typescript相关问答推荐

无法将select选项的值设置为ngFor循环中的第一个元素

使Typescribe强制所有对象具有相同的 struct ，从两个选项

当方法参数和返回类型不相互扩展时如何从类型脚本中的子类推断类型

类型脚本中没有接口的中间静态类

是否使用非显式名称隔离在对象属性上声明的接口的内部类型？

使用TypeScrip根据(可选)属性推断结果类型

APIslice-CreateAPI的RTK打字错误

如何将所有props传递给React中的组件？

Angular 17子路由

为什么ESLint会抱怨函数调用返回的隐式`any`？

从对象类型描述生成类型

为什么Typescript只在调用方提供显式泛型类型参数时推断此函数的返回类型？

将带有样式的Reaction组件导入到Pages文件夹时不起作用

类型脚本-处理值或返回值的函数

为什么特定的字符串不符合包括该字符串的枚举？

如何在不违反挂钩规则的情况下动态更改显示内容(带有状态)？

如何通过转换器类继承使用多态将对象从一种类型转换为另一种类型

使用&reaction测试库&如何使用提供程序包装我的所有测试组件

Vite+Chrome扩展 list v3-；不能在模块外使用import语句；对于inpage脚本

元组解释