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

伊恩

我为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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

HTML锚点标记onclick()和href同时执行

来自分类Dev

递归查询列中的锚点和递归部分之间的类型不匹配

来自分类Dev

HtmlUnit-无法从div获取锚点

来自分类Dev

锚点类型=按钮可以吗?

来自分类Dev

溢出按钮上方的锚点弹出菜单

来自分类Dev

友好的网址和锚点

来自分类Dev

界面无法获取回调Android

来自分类Dev

更改按钮锚点SwiftUI

来自分类Dev

Reality Composer –是否可以同时分配垂直和水平锚点?

来自分类Dev

应用内审核界面无法在Android中启动

来自分类Dev

Kotlin扩展功能和界面

来自分类Dev

HTML语义-充当锚点的按钮

来自分类Dev

图形界面无法启动

来自分类Dev

HTML锚点无法更改网址?

来自分类Dev

PHP:[[:<:]]和[[:>:]]锚点

来自分类Dev

Gnome图形界面无法加载

来自分类Dev

将锚点转换为按钮

来自分类Dev

HtmlUnit-无法从div获取锚点

来自分类Dev

锚点类型=按钮可以吗?

来自分类Dev

箭头锚点无法快速正确显示

来自分类Dev

导航后,温泉用户界面页面无法正确加载

来自分类Dev

用户界面无法控制Philips Hue Color灯泡

来自分类Dev

jQuery滚动锚点无法正常工作

来自分类Dev

如何在锚点和按钮上使用[role = option]

来自分类Dev

Jenkins Firefox界面无法正确呈现

来自分类Dev

主界面无法更改为我自己的情节提要

来自分类Dev

Android的Javascript界面无法正常工作

来自分类Dev

锚点和按钮内部的垂直定位

来自分类Dev

我的 Android 用户界面无法运行?