reactjs - 如何允许组件采用 FunctionComponent 或组件的参数

Question

我正在使用 Typescript 和 ReactJS，我是个菜鸟。我正在尝试做一些我认为应该很简单的事情，但是 Typescript 阻碍了我。
我有两个 React 页面组件定义如下:

const HomePage: React.FunctionComponent = () => (
  // stateless component, just JSX and no logic
)


class ReceiptPage extends React.Component<IReceiptPageProps> {
  // has logic and state, defines render()
}

另一个组件应该能够将这两者都作为参数:

export interface IPublicRouteWrapperProps extends IPublicRouteProps {
  component: typeof Component;   // <---- Works for ReceiptPage, but not HomePage
  layout: typeof Layout;
}

const PublicRouteWrapper: React.FunctionComponent<IPublicRouteWrapperProps> = ({
  component: Component,
  layout: Layout,
  ...rest
}) => (
  <PublicRoute
    {...rest}
    render={props => (
      <Layout>
        <Component {...props} />
      </Layout>
    )}
  />
);

这在我传入 ReceiptPage 组件时有效，但在我传入 HomePage 组件时无效:

    <PublicRouteWrapper
      title="blah"
      path={`${match.url}`}
      component={HomePage} // <-- error here, but works fine with ReceiptPage
      exact={true}
    />

错误是:

Type 'FunctionComponent<{}>' is not assignable to type 'typeof Component'.
Type 'FunctionComponent<{}>' provides no match for the signature 'new <P = {}, S = {}, SS = any>(props: Readonly<P>): Component<P, S, SS>'.

这是有道理的，因为 HomePage 不是那种类型。
但我无法弄清楚它应该是什么。有什么方法可以定义 PublicRouteWrapper这样任一页面都可以用作参数吗？

Answer 1

相信你在找React.ComponentType ，它是 ComponentClass 的并集(表示类组件的接口(interface))和FunctionComponent .类型可以用props类型参数化，但是可以选择any允许所有带有任何 Prop 的组件。稍后，您可以通过指定实际类型来提高类型安全性。IPublicRouteWrapperProps接口(interface)可以写成:

export interface IPublicRouteWrapperProps extends IPublicRouteProps {
  component: React.ComponentType<any>;   // <----  Works for both ReceiptPage & HomePage
  layout: typeof Layout;
}