reactjs - 界面不能同时扩展 anchor 和按钮类型

Question

我有以下 React 按钮界面(可以是 anchor 或按钮):

type ButtonTypes = HTMLAnchorElement | HTMLButtonElement;

interface ButtonProps<T extends ButtonTypes>
    extends React.AnchorHTMLAttributes<T>, React.ButtonHTMLAttributes<T> {
    className?: string;
    kind: 'default' | 'primary' | 'secondary' | 'tertiary';
    disabled?: boolean;
    icon?: React.ReactElement<React.HTMLProps<HTMLOrSVGElement>>;
    trailingIcon?: boolean;
    iconOnly?: boolean;
    fullWidth?: boolean;
    outline?: boolean;
    size?: 'small' | 'large';
    href?: string;
    children?: React.ReactNode;
}

但我收到错误，无法同时扩展 React.AnchorHTMLAttributes<T>和React.ButtonHTMLAttributes<T>由于类型的命名属性“type”不相同...

然而，这受到了 Material Design 如何构建按钮的启发:https://github.com/material-components/material-components-web-react/blob/master/packages/button/index.tsx#L38

所以不确定为什么我不能继承两者，但他们(MDC)却能够继承？我是否缺少某些内容(语法或类型包)来允许这种行为？

Answer 1

为了解决这个问题，我必须通过添加以下内容来覆盖类型属性:

类型？: '提交' | '重置' | 'button'; 进入我的 ButtonProps 界面。

我还必须更改按钮的构建方式:

if (href) {
    return (
        <a {...(props as React.HTMLProps<HTMLAnchorElement>)} href={href}>{btnContent}</a>
    )
}

return (
    <button {...(props as React.HTMLProps<HTMLButtonElement>)}>{btnContent}</button>
);

至:

if (href) {
    return (
        <a {...(props as React.AnchorHTMLAttributes<HTMLAnchorElement>)} href={href}>{btnContent}</a>
    )
}

return (
    <button {...(props as React.ButtonHTMLAttributes<HTMLButtonElement>)}>{btnContent}</button>
);