typescript Общий тип для функциональных и классовых компонентов React
Primary tabs
Универсальным типом одновремено подходящим для классовых и функциональных компонентов , судя по всему, является React.ComponentType (далее его сигнатура из исходников React):
type ComponentType<P = {}> = ComponentClass<P> | FunctionComponent<P>;
-- подходит в т.ч. для случая когда вы получаете переменную, а потом делаете из неё JSX-элемент (добавляя к имени угловые скобки и выставляя пропсы)
Например:
export interface MyPropsType { id: 'A' | 'B' | "C"; label: string; } export interface ConfigElement extends MyPropsType { component: React.ComponentType<MyPropsType>; } export interface SomeMainComponentProps { elements: ConfigElement[]; } // отрендерит массив классовых или функциональных компонентов // render array of functional or class components export function SomeMainComponent( { elements }: SomeMainComponentProps) { return ( <> {elements.map(({ id, label, component: ComponentElement}) => { return ( <ComponentElement id={id} key={Array.isArray(id) ? (id[0] as string) : (id as string)} label={label} /> ); })} </> ); }
Что ещё почитать:
- React.ComponentType
: https://flow.org/en/docs/react/types/#to... - How to Statically Type React Components with TypeScript https://www.pluralsight.com/guides/how-t...
- Log in to post comments
- 1381 reads