如何使用条件 props 接口定义 React 组件？ 问题：字段中没有TReact.HTMLProps实施联合类型用法

编程问答 2022-05-22

问题描述

我需要定义呈现 textarea 或 input 的“Field”组件取决于 prop multiline

我试图这样做：

import React from 'react';

type Props<T extends boolean = boolean> = { multiline: T } & T extends true 
    ? React.HTMLProps<HTMLTextAreaElement> 
    : React.HTMLProps<HTMLInputElement>

export const Field: React.FC<Props> = ({ multiline,...props }) => { // error here
    const Element = multiline ? 'textarea' : 'input';

    return <Element {...props} onInput={e => {}} />; // error here
}

// usage

const result = (
    <Field onChange={e => console.log(e.target.value)} /> // error here
);

但是打字稿提供了几个错误，例如：

1 Property 'multiline' does not exist on type 'HTMLProps<HTMLInputElement> & { children?: ReactNode; }'.(2339)

2 [large error,more in playground]

3 Property 'value' does not exist on type 'EventTarget'.(2339)

Playground here

如何定义这样的组件？

解决方法

我相信你应该使用这两种类型的交集，所以它可以是/或。因此，对于 Props 类型使用 '&' 运算符来覆盖两种输入类型，然后在 onChange 事件中为每个输入类型事件再次使用它（因为它可以是任何一种）。像这样：

import React from 'react';

type Props<T extends boolean = boolean> = { multiline?: T } &
    React.HTMLProps<HTMLTextAreaElement> &
    React.HTMLProps<HTMLInputElement>;

export const Field: React.FC<Props> = ({ multiline,...props }) => {
    const Element = multiline ? 'textarea' : 'input';

    return <Element {...props} />;
}

// usage

const result = (
    <Field onChange={(e: React.ChangeEvent<HTMLInputElement> & React.ChangeEvent<HTMLTextAreaElement>) => (
        console.log(e.target.value)
    )} />
);
,

问题：字段中没有T

您已经定义了一个依赖于 Props 的泛型类型 T，但您的组件不是泛型的。它总是需要 Props<boolean> 解析为 HTMLInputElement 道具，因为 boolean extends true 是 false。 {multiline: boolean} 迷路的原因是您需要在其余类型周围加上括号。

React.HTMLProps

在使用您的 React.HTMLProps 类型时，将不匹配的属性（例如 type="number" 分配给 textarea 或将 rows={5} 分配给 input）时，我没有收到错误消息。限制性更强的类型是 JSX.IntrinsicElements['textarea'] 和 JSX.IntrinsicElements['input']（解析为 React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>,HTMLTextAreaElement> 之类的类型）。如果您想严格执行，请使用这些！这也使得 e 回调中的 onChange 值获得基于元素的正确类型。

实施

当使用具有限制性类型的通用组件时，我们现在在 return <Element {...props} />; 上的实现中出现错误我认为将其分成两部分 (return multiline ? <textarea {...props} /> : <input {...props}/>;) 会有所帮助，但我们仍然会出现错误。条件很粗糙。您可以使用 as 断言来解决问题。当函数的使用保持严格类型时，我通常可以在函数的实现中进行断言。所以你可以这样做：

type Props<T extends boolean = boolean> = { multiline: T } & (T extends true
    ? JSX.IntrinsicElements['textarea']
    : JSX.IntrinsicElements['input'])

export const Field = <T extends boolean>({ multiline,...props }: Props<T>) => {
    const Element = multiline ? 'textarea' : 'input';

    return <Element {...props as any} />;
}

Playground #1

联合类型

我们可以通过键入 Props 作为两种情况的联合来避免做出断言。这使我们可以通过查看 props.multiline 来检查我们拥有的联合类型。但是这会变得很混乱，因为在之后区分联合之前您无法解构，但我们不想将多行传递给 DOM。

此代码通过了所有类型检查，但需要额外的工作来防止将 multiline 传递到 DOM。

type Props = ( 
    { multiline: true } & JSX.IntrinsicElements['textarea'] | 
    { multiline: false } & JSX.IntrinsicElements['input']
);

export const Field = ({ ...props }: Props) => {
    return props.multiline ? <textarea {...props} /> : <input {...props}/>
}

Playground #2

用法

无论哪种方式，用法都是非常强类型的！我们的 onChange 回调获得了正确的类型，如 React.ChangeEvent<HTMLTextAreaElement>，如果在 textarea 时传递 multiline={false} 道具我们会得到错误，反之亦然。

<Field
    onChange={e => console.log(e.target.value)} // e: React.ChangeEvent<HTMLTextAreaElement>
    multiline={true}
    rows={5} // ok
    type="number" // error
/>
<Field
    onChange={e => console.log(e.target.value)} // e: React.ChangeEvent<HTMLInputElement>
    multiline={false}
    type="number" // ok
    rows={5} // error
/>
fieldfieldfieldjavascriptreactjsreactjsreactjsreactjstsxtypescripttypescripttypescript