Question

我正在研究具有variant属性的按钮组件，以确定其颜色。这是简化版

interface Props extends React.HTMLProps<HTMLButtonElement> {
  variant: 'yellow' | 'green';
}

function Button({ variant, ...props }: Props) {
  console.log(variant);

  return (
    <button
      type="button"
      {...props}
    />
  );
}

我的type下出现打字错误，提示：

（JSX属性）ButtonHTMLAttributes.type ?： “按钮” | “提交” | “重置” |未定义类型“字符串”不是可分配给类型““按钮” | “提交” | “重置” | undefined'.ts（2322）index.d.ts（1872，9）：期望的类型来自在类型上声明的属性“类型” 'DetailedHTMLProps， HTMLButtonElement>'

所以我不确定我是否正确扩展了按钮道具？也许还有另一种方法？

Answer 1

您应该这样使用ButtonHTMLAttributes而不是HTMLProps：

interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant: 'yellow' | 'green';
}

function Button({ variant, ...props }: Props) {
  console.log(variant);

  return (
    <button
      type="button"
      {...props}
    />
  );
}

Answer 2

Codesandbox Live Preview

您可能正在寻找的是React.HTMLAttributes<HTMLButtonElement>

import * as React from "react";
import { render } from "react-dom";

import "./styles.css";

interface Props extends React.HTMLAttributes<HTMLButtonElement> {
  variant: 'yellow' | 'green';
}

function Button({ variant, ...props }: Props) {

  return (
    <button
      type="button"
      {...props}
    />
  );
}

const rootElement = document.getElementById("root");
render(<Button variant='green' />, rootElement);

正确将组件属性扩展到默认的html按钮属性

2 个答案: