Question

我试图输入一个可以＆＃34;包裹＆＃34;的反应组件。值为number或number[]，但不能同时为两者。这是我迄今为止发表的声明（一个人为的版本）：

export interface Props<T> {
  value: T;
}

class SomeComponent<T extends number | number[]> extends React.Component<Props<T>, any> {
  getValue(): T;
}

我的问题是我不知道1.如果声明是正确的2.我如何使用它。我现在正在尝试/想要做这样的事情，但这是一个语法错误：

const foo: number = 123;
return <SomeComponent<number> value={foo} />

我如何声明和使用这样工作的组件？

Answer 1

问题是你不能在tsx标签中使用泛型。您可以使用常规TS语法实例化组件：

var cNumber = new SomeComponent<number>({
    value : 0 
});
var cNumberArray = new SomeComponent<number[]>({
    value: [1, 2, 3]
});

另一种选择是声明修复类型参数的额外类型：

let SomeNumberComponent: new ()=> SomeComponent<number> =  SomeComponent as any;

OR

class SomeIntComponent extends SomeComponent<number> {

}

注意此限制也会突出显示here

如何输入＆＃34;多态＆＃34;反应组件？

1 个答案: