我有一个组件,它接受一个选项数组,定义如下:
interface Props {
options: {
label: string;
value: string;
}[]
}
function MyComponent(props: Props) {...}
并这样实现:
<MyComponent
options={[
{ label: "Right Hand", value: "RIGHT" },
{ label: "Left Hand", value: "LEFT" }
]}
/>
在本例中,我给予了选择优势手的选项,并定义了一种类型,如下所示:
type DominantHand = "RIGHT" | "LEFT"
是否可以使MyComponent
灵活地指定选项的类型?
我已经尝试过像下面这样完成这个任务,但是很明显这里的语法不正确:
type DominantHand = "RIGHT" | "LEFT"
type Gender = "MALE" | "FEMALE"
interface Props {
options<T>: { // this syntax is wrong
label: string;
value: T;
}[]
}
function MyComponent(props: Props) {...}
...
<MyComponent
options<DominantHand>={[ // <--- this syntax is wrong
{ label: "Right Hand", value: "RIGHT" },
{ label: "Left Hand", value: "LEFT" }
]}
/>
<MyComponent
options<Gender>={[ // <--- this syntax is wrong
{ label: "Male", value: "MALE" },
{ label: "Female", value: "FEMALE" }
]}
/>
有没有办法做到这一点?
4条答案
按热度按时间v440hwme1#
在阅读了official typescript documentation之后,我会提出以下建议:
eagi6jfj2#
您应该在接口本身中定义泛型,这样它就可以向下传递到内部的对象。
所以应该是这样的:
wnavrhmk3#
试用
然后你可以创建一个单独的选项对象并像这样传递它
1rhkuytd4#
这里有一个有点先进的方法来做它(我在我正在做的当前项目中做的)
在这里,我有一个React组件
TextInput
,它显示text
、password
或email
类型的输入。但是,我想***为使用此组件的任何人提供一个选项,以确保为输入提供的***
name
***与他们的表单名称**匹配。所以,我的注册表单名称
types
看起来像这样。( 我是这样做的,所以我可以使用来自一个函数的所有输入的值来更新状态,通过使用每个输入组件将在输入上提供的名称 *)。然后,
TextInput
道具。然后
TextInput
组件本身因此,要使用
TextInput
组件,需要执行以下操作请注意我在这里做了什么**
<TextInput<SignupInputNamesTypes>
**我现在能够将我的type
泛型传递给TextInput
组件,然后使用该组件设置可接受的name
类型。它的构建是,在使用
TextInput
组件时,甚至不需要沿着泛型。我希望这对外面的人有帮助。
这是故事书上的样子。