Question

我有以下用于React组件的类型：

export interface AsyncRouteComponentState {
  Component: AsyncRouteableComponent | null;
}

export interface AsyncComponent {
  getInitialProps: (props: Ctx<any>) => any;
  load?: () => Promise<React.ReactNode>;
}

export interface AsyncRouteComponent<Props = {}>
  extends AsyncComponent,
    React.Component<DocumentProps & Props, AsyncRouteComponentState> {}

export type AsyncRouteComponentType<Props> =
  | React.ComponentClass<Props> & AsyncComponent
  | React.StatelessComponent<Props> & AsyncComponent;

export type AsyncRouteableComponent<Props = any> =
  | AsyncRouteComponentType<RouteComponentProps<Props>>
  | React.ComponentType<RouteComponentProps<Props>>
  | React.ComponentType<Props>;

我有以下内容：

class AsyncRouteComponent extends React.Component<Props, AsyncRouteComponentState> {
    render() {
      const { Component: ComponentFromState } = this.state;

      if (ComponentFromState) {
        return <ComponentFromState {...this.props} />;
      }

      if (Placeholder) {
        return <Placeholder {...this.props} />;
      }

      return null;
    }
  };
}

它在抱怨return <ComponentFromState {...this.props} />;

  if (ComponentFromState) {
    return <ComponentFromState {...this.props} />;
  }

错误消息是：

输入'Readonly <{children ?: ReactNode; }>和“只读”为缺少“ RouteComponentProps”类型的以下属性：历史记录，位置，匹配项

打字稿3.1.x中没有此类错误。

该组件的类型：

export type AsyncRouteableComponent<Props = any> =
  | AsyncRouteComponentType<RouteComponentProps<Props>>
  | React.ComponentType<RouteComponentProps<Props>>
  | React.ComponentType<Props>;

是因为我没有缩小联合范围，并且它无法确定它是否需要带有RouteComponentProps的组件？

整个问题是组件可能具有或没有这些道具。

我对如何解决这个问题有些困惑？

联合体类型升级到打字稿3.2.2后给出错误消息

0 个答案: