У меня есть иерархия наследования, как показано ниже:
![class hierarchy](https://i.stack.imgur.com/1Hb4F.png)
В другом компоненте (пусть назовем его MyClass) я использую компоненты B
и D
(или любой из конкретных классов E, F, G, H
), как показано ниже:
abstract class MyClass {
protected componentRef: React.RefObject</* This is where I'm stuck */> = React.createRef();
public render() {
const Component = flag ? B : D;
return (
<Component
{...props}
ref={this.componentRef}
/>
);
}
}
Поскольку я использую машинопись в своем проекте, я получаю ошибку типа TS2322
из-за несовместимости между ref
prop и this.componentRef
. Мне нужно установить ref prop для доступа к F()
методу класса A
в другом месте.
Моя проблема в том, что я не знаю, как определить тип члена componentRef
в классе MyClass
.
Я попытался решить проблему, установив тип componentRef
, как показано ниже,
protected componentRef: React.RefObject<? extends A> = React.createRef();
но безуспешно. Честно говоря, я не знаком со схемами определения типов машинописного текста.
Кроме того, я не предпочитаю решение ниже.
abstract class MyClass<ComponentType extends A> {
protected componentRef: React.RefObject<ComponentType> = React.createRef();
}
и установка типа на any
.
Есть ли шанс на существование какого-либо другого решения, подобного тому, что я пытался сделать? (например, определить универсальный тип, используя ключевое слово type
)