Во-первых, убедитесь, что ваш компонент высшего порядка поставляет реквизит, который интересует ваш компонент. Возьмем, например, className
.
interface WithClassName {
className: string;
}
Наш withClassName
HOC примет компонент, готовый принять className
в качестве опоры, и вернет компонент, который больше не принимает className
.
export function withClassName<T extends React.ComponentType<Partial<WithClassName>>>(Component: T): React.FunctionComponent<Omit<React.ComponentProps<T>, keyof WithClassName>> {
return props => React.createElement(Component, { className: "foo", ...props });
}
type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
Использование:
const NewSelect = withClassName(Select);