функция (и) много, много раз с различными параметрами - и даже тогда это будет оптимизацией, которая может быть преждевременной.
уРеагировать на компонент высшего порядка (HOC) с TypeScript. HOC должен принять еще одну опору, чем упакованный компонент, поэтому я написал это:
type HocProps {
// Contains the prop my HOC needs
thingy: number
}
type Component<P> = React.ComponentClass<P> | React.StatelessComponent<P>
interface ComponentDecorator<TChildProps> {
(component: Component<TChildProps>): Component<HocProps & TChildProps>;
}
const hoc = function<TChildProps>(): (component: Component<TChildProps>) => Component<HocProps & TChildProps) {
return (Child: Component<TChildProps>) => {
class MyHOC extends React.Component<HocProps & TChildProps, void> {
// Implementation skipped for brevity
}
return MyHOC;
}
}
export default hoc;
Другими словами,hoc
это функция, которая выдает фактический HOC. Этот HOC является (я считаю) функцией, которая принимаетComponent
, Поскольку я не знаю заранее, каким будет обернутый компонент, я использую универсальный типTChildProps
определить форму реквизита обернутого компонента. Функция также возвращаетComponent
, Возвращенный компонент принимает реквизиты для упакованного компонента (опять же, набирается с использованием универсальногоTChildProps
) а также какие-то реквизиты для себя нужны (типаHocProps
). При использовании возвращенного компонента все реквизиты (обаHocProps
и реквизит для завернутыхComponent
) должны быть предоставлены.
Теперь, когда я пытаюсь использовать свой HOC, я делаю следующее:
// outside parent component
const WrappedChildComponent = hoc()(ChildComponent);
// inside parent component
render() {
return <WrappedChild
thingy={ 42 }
// Prop `foo` required by ChildComponent
foo={ 'bar' } />
}
Но я получаю ошибку TypeScript:
TS2339: Property 'foo' does not exist on type 'IntrinsicAttributes & HocProps & {} & { children? ReactNode; }'
Мне кажется TypeScript не заменяетTChildProps
с формой реквизита, необходимого дляChildComponent
, Как я могу заставить TypeScript сделать это?