时间戳

首页 > 解决方案 > 如何在 TypeScript 中使用组合扩展 React 组件而不会“缺少属性”？

reactjs - 如何在 TypeScript 中使用组合扩展 React 组件而不会“缺少属性”？

问题描述

这是我正在尝试的：

const ActionLink: typeof NavLink = ({onClick, ...props}) => {
    function handleClick(ev: React.MouseEvent<HTMLAnchorElement>) {
        ev.preventDefault();
        if(onClick) onClick(ev);
    }
    return <NavLink {...props} onClick={handleClick}/>
}

我认为NavLink我想ActionLink“继承”它的所有属性并不重要。但是，当我尝试这样做时typeof NavLink，会出现此错误：

src/components/App.tsx:155:7 - error TS2739: Type '({ onClick, ...props }: ClassAttributes<HTMLAnchorElement> & AnchorHTMLAttributes<HTMLAnchorElement> & Pick<DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "media" | ... 257 more ... | "css"> & { ...; } & { ...; }) => Element' is missing the following properties from type 'StyledComponent<DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, Pick<DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "media" | ... 257 more ... | "css">, any>': withComponent, __emotion_styles

155 const ActionLink: typeof NavLink = ({onClick, ...props}) => {
          ~~~~~~~~~~

怎么来的？我怎么缺少属性？不应该...props全部捕获吗？

NavLink是一个情感风格的组件：

const NavLink = styled.a`
    display: flex;
    align-items: center;
    text-decoration: none;
    padding: 2px 5px;
    &:hover {
        background-color: #eee;
    }
`;
NavLink.defaultProps = {href: ''};

标签： reactjstypescript

解决方案

我认为这是因为withComponent并且__emotion_styles不是 React 道具，而是它们是函数本身的 JS 道具。

推荐阅读