[英]Iterate over object with correct generic type
我想迭代一个通用接口。 并在jsx中使用object的值。 但是 Typescript 抛出以下内容:
'(key: K) => JSX.Element' 类型的参数不能分配给 '(value: string, index: number, array: string[]) => Element' 类型的参数。
interface Props<T> {
object: T;
}
export default function BasicInputs<T, K extends keyof T>({
object,
}: Props<T>): ReactElement {
return (
<div>
{Object.keys(object).map((key: K) => (
<div>
<div className="">
<input
value={object[key]}
type="text"
name="name"
id="name"
/>
</div>
</div>
))}
</div>
);
}
我应该如何定义正确输入的接口和组件?
<input />
value
是string | number | readonly string[] | undefined
string | number | readonly string[] | undefined
string | number | readonly string[] | undefined
。
我们可以通过这种方式获取有效的input.value
类型:
type InputValue = React.InputHTMLAttributes<HTMLInputElement>['value']
现在我们只需要对T
应用适当的限制:
type InputValue = React.InputHTMLAttributes<HTMLInputElement>['value']
type HashMap = Record<PropertyKey, InputValue>
interface Props<T> {
object: T;
}
export default function BasicInputs<T extends HashMap>({
object,
}: Props<T>) {
return (
<div>
{Object.keys(object).map((key) => (
<div>
<div className="">
<input
value={object[key]}
type="text"
name="name"
id="name"
/>
</div>
</div>
))}
</div>
);
}
它应该工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.