Reactjs 如何在TypeScript中使用composition扩展React组件，而不使用；缺少属性“；？_Reactjs_Typescript

Reactjs 如何在TypeScript中使用composition扩展React组件，而不使用；缺少属性“；？

reactjs typescript

Reactjs 如何在TypeScript中使用composition扩展React组件，而不使用；缺少属性“；？,reactjs,typescript,Reactjs,Typescript,以下是我正在尝试的： const ActionLink: typeof NavLink = ({onClick, ...props}) => { function handleClick(ev: React.MouseEvent<HTMLAnchorElement>) { ev.preventDefault(); if(onClick) onClick(ev); } return <NavLink {...props

以下是我正在尝试的：

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

为什么？我怎么会错过酒店？

…道具不应该捕获所有道具吗

NavLink
是一个：
我认为这是因为带组件的和带情感的样式不是反应道具，而是函数本身的JS道具。
我认为这是因为带组件的和带情感的样式不是反应道具，而是函数本身的JS道具。
我假设NavLink
来自react router dom
？在这种情况下，它是一个有状态组件（作为对象而不是函数），因此如果将ActionLink
声明为功能组件，则typeof
将不起作用。您可以使用类ActionLink扩展NavLink
。但即使是facebook本身也不鼓励继承：@Richard抱歉，它实际上是一个样式化组件：我不确定为什么仅仅因为我把它放在了一个功能组件中，状态就会被打破…？我假设NavLink
来自react-router-dom
？在这种情况下，它是一个有状态组件（作为对象而不是函数），因此如果将ActionLink
声明为功能组件，则typeof
将不起作用。您可以使用类ActionLink扩展NavLink。但即使是facebook本身也不鼓励继承：@Richard抱歉，它实际上是一个样式化组件：我不确定为什么仅仅因为我把状态放在了一个功能组件中，它就会被打破。。。？
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}) => {
          ~~~~~~~~~~

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