界面无法同时扩展锚点和按钮的类型

debugcn 发表于 Dev

伊恩

我为React按钮（可以是锚点或按钮）具有以下界面：

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）能够做到？我是否缺少某些东西（语法或类型包）来允许这种行为？

伊恩

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

type?: 'submit' | 'reset' | '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>
);

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。