reactjs - 将组件作为构造函数传递时如何键入组件？

Question

我正在尝试将组件作为构造函数传递，但 Typescript 抱怨我的接口，因为我猜我正在扩展 IpanelContent。

请参阅下面的所有代码，但我的问题是；componentIpanelType应该是什么类型？

我希望能够创建几个扩展 IpanelContent 的新接口，而无需更改 IPanelType 接口

我的实现：

<PanelStack
            visible={visibleMenu}
            onVisibleChange={(visible: boolean) => {
                setVisibleMenu(visible);
            }}
            options={{
                api:
                    'https://cors-anywhere.herokuapp.com/https://test-www.regionhalland.se/app/plugins/region-halland-plugin-navigation/ajax/region_halland_navigation.php',
            }}
            initialType="panelMeny"
            types={[
                {
                    name: 'panelMenu',
                    component: PanelMenu,
                    options: {
                        someProp: 'SomeProp',
                    },
                },
            ]}
        ></PanelStack>

我的界面：

export interface IPanelContent {


navigation: IPanelStackNavigation;
    isCurrent: boolean;
}

export interface IPanelType {
    name: string;
    component: ComponentType<IPanelContent>;
    options?: IPanelOptions;
}

export interface IPanelMenu extends IPanelContent {
    api: string;
    id?: string | number;
}

export interface IPanelImage extends IPanelContent {
    url: string;
}

我的错误：

Type '({ navigation, id, api, isCurrent }: IPanelMenu) => ReactElement<IPanelContent>' is not assignable to type 'ComponentType<IPanelContent>'.
  Type '({ navigation, id, api, isCurrent }: IPanelMenu) => ReactElement<IPanelContent>' is not assignable to type 'FunctionComponent<IPanelContent>'.
    Types of parameters '__0' and 'props' are incompatible.
      Property 'api' is missing in type 'PropsWithChildren<IPanelContent>' but required in type 'IPanelMenu'.ts(2322)

标签： reactjstypescript