reactjs - npm 更新后 React 无状态组件损坏

Question

我在 4 个月后重新开始编程，所以我决定 npm 更新这个项目，但它破坏了我所有的无状态功能。

interface INotFoundPageContainerProps {
    history: any;
}

class NotFoundPageContainer extends React.Component<INotFoundPageContainerProps, any> {

    constructor(props: INotFoundPageContainerProps) {
        super(props);
        this.onClickHomeButton = this.onClickHomeButton.bind(this);
    }

    onClickHomeButton(): void {
        this.props.history.push('/');
    }

    render() {
        return (
            <NotFoundPage
                onClickHomeButton={this.onClickHomeButton}
            />
        );
    }

}

export default withRouter(NotFoundPageContainer);

错误:

TS 在上面代码的最后一行给我一个错误:

TS2345: Argument of type 'typeof NotFoundPageContainer' is not assignable to parameter of type 'ComponentType<RouteComponentProps<any, StaticContext, any>>'.
  Type 'typeof NotFoundPageContainer' is not assignable to type 'StatelessComponent<RouteComponentProps<any, StaticContext, any>>'.
    Type 'typeof NotFoundPageContainer' provides no match for the signature '(props: RouteComponentProps<any, StaticContext, any> & { children?: ReactNode; }, context?: any): ReactElement<any>'.

Answer 1

React.Component 的属性类型不正确，因为您将其包装在 withRouter HOC 中。

---

组件<NotFoundPageContainer/>正在被 withRouter 包装，它会传递特定于路由器的属性，但您不会在 NotFoundPageContainer 中反射(reflect)出来的类型定义。

考虑类似的东西

import { RouteComponentProps } from 'react-router-dom';

interface INotFoundPageContainerRouterProps {
    history: any;
}

interface INotFoundPageContainerProps 
  extends RouteComponentProps<INotFoundPageContainerRouterProps> {

} 

然后您就可以正确定义组件的类型了

class NotFoundPageContainer 
  extends React.Component<INotFoundPageContainerProps, any> { ... }