Реагировать на собственный компонент как на типизированную опору модели

Question

Я пытаюсь создать класс, который выглядит примерно так

export default class IconModel {
    name: string
    title: string
    iconType: "AntDesign" | "Ionicons"
    component: React.Component //What type should be used?
    iconName: string
    size: number
}

Я хочу, чтобы опора component могла передавать только компонент реакции (например, Home.tsx)

Затем я использую это так

import { HomeScreen } from '../../../screens';
var iconData: IconModel[] = [
    {
        component: HomeScreen,
        iconName: "appstore1",
        iconType: "AntDesign",
        ...

    <NavigationContainer>
        <BottomTab.Navigator initialRouteName={INITIAL_ROUTE_NAME}>
            {iconData.map((x, key) => (
                    <BottomTab.Screen
                        name={x.name}
                        component={x.component}
                        options={{
                            title: x.title,
                            tabBarIcon: ({ focused }) => <TabBarIcon focused={focused} data={x} />,
                        }}
                    />
            ))}
        </BottomTab.Navigator>
    </NavigationContainer>

Можете ли вы ввести переменную или опору как компонент JSX / React?

Answer 1

Способ go - использовать Screen в качестве типа опоры

export default class IconModel {
    name: string
    title: string
    iconType: "AntDesign" | "Ionicons"
    component: Screen 
    iconName: string
    size: number
}

Answer 2

Возможно, вы говорите о передаче компонента реакции в качестве опоры, вы можете сделать это, используя PropTypes.elementType

Вы можете получить более подробную информацию здесь,

https://reactjs.org/docs/typechecking-with-proptypes.html#proptypes