Question

当我使用一个以一个组件作为参数的高阶组件并且该组件接受一些道具时，我会收到此错误。

Typescript Error
    Type '{ user: any; userProfile: UserDetail; history: History<PoorMansUnknown>; location: Location<PoorMansUnknown>; match: match<...>; staticContext?: StaticContext | undefined; }' is not assignable to type 'IntrinsicAttributes & withScrollRestoration<HomeProps>.ScrollRestorationHOCProps & { ...; }'.
      Property 'user' does not exist on type 'IntrinsicAttributes & withScrollRestoration<HomeProps>.ScrollRestorationHOCProps & { ...; }'

这是我在主要tsx文件中所显示的内容，它显示了用户错误

<HashRouter>
            <Switch>
              <Route exact path="/Home" render={(props) => (<Home {...props} user={this.props.authContext.getCachedUser()?.profile?.name} userProfile={this.state.currentUser} />)} />

这是我的高阶组件

withScrollRestoration.tsx

import * as React from 'react';
import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';



const withScrollRestoration = <P extends object>(MyComponent: React.ComponentType<P>) => {

    interface ScrollRestorationHOCProps {
    }

    const ScrollRestorationHOC: React.SFC<P & ScrollRestorationHOCProps> = (props: P) => {

        const { pathname } = useLocation();


        useEffect(() => {
            window.scrollTo(0, 0);
        }, [pathname])

        return (
            <MyComponent {...props as P} />
        );
    }

    return ScrollRestorationHOC;
}

export default withScrollRestoration;

这是我的home.tsx所拥有的

import withScrollRestoration from './withScrollRestoration';
....
some code
...
export default withScrollRestoration(Home)

我尝试了一些类似滚动恢复的操作将<MyComponent {...props}/>更改为<MyComponent {...props as P} />或<MyComponent {...props as any} />，这两个似乎有效，但是为什么。

我尝试和工作过的一件事是将home的所有其他道具包装在一个函数中并返回到那里

像这样

homeProps = () => {
return(
{
    user:this.props.authContext.getCachedUser()?.profile?.name,
    userProfile:this.state.currentUser
}
)

}

然后在主tsx文件中添加了这个

<Route exact path="/Home" render={(props) => (<Home {...props} {...this.homeProps()} />)} />

。我不知道为什么行得通。我知道此错误是某种类型的检查，但究竟是什么以及如何解决它

由于React高阶组件导致打字稿错误

0 个答案: