在打字稿中扩展react-select接口属性

Question

我为我的反应项目自定义了一个反应选择下拉组件。当我尝试使用 React.HTMLAttributes<HTMLSelectElement | 扩展界面时 HTMLInputElement>. 它显示“没有与此调用匹配的重载”。我尝试扩展不同的属性来获取默认值，如 id、标签、名称、占位符等。如何获取 props 中的默认属性？有人遇到过类似的问题吗？

示例代码：

import * as React from "react";

import ReactSelect from 'react-select';

export interface SelectProps extends React.HTMLAttributes<HTMLSelectElement | HTMLInputElement> {
    options: Array<any>;
    isMulti: boolean;
    isDisabled: boolean;

};

const Select: React.FC<SelectProps> = (props: SelectProps) => {

    return (<div>
        <label htmlFor={props.id}>{props.label}</label>
        <div>
            <ReactSelect
                {...props}
            />
        </div>
    </div>)
}
export default Select;

使用上面的代码后，我无法获取 props.id 或 props.name 等。

Answer 1

编辑：

React-Select v5 现在原生支持 TypeScript，因此进行了一些类型更改（详细信息）。

这是 v5 (react-select/async) 的更新示例，类似于 v4 的原始示例：

import ReactSelectAsync, { AsyncProps } from "react-select/async";
import { GroupBase } from "react-select";

interface CustomSelectAsyncProps {
  additionalCustomProp: number;
}

function SelectAsync<
  OptionType,
  IsMulti extends boolean = false,
  GroupType extends GroupBase<OptionType> = GroupBase<OptionType>
>({
  additionalCustomProp,
  ...props
}: AsyncProps<OptionType, IsMulti, GroupType> & CustomSelectAsyncProps) {
  return <ReactSelectAsync {...props} />;
}

export default SelectAsync;

代码沙箱

原答案：

这在官方的react-select文档中有记录。

引用：

包装 Select 组件 通常，Select 组件被包装在整个应用程序中使用的另一个组件中，并且包装器应该与原始 Select 组件一样灵活（即，允许不同的选项类型、组、单选或多选）选择）。为了提供这种灵活性，包装组件应该重新声明泛型并将它们转发到底层的 Select。以下是如何执行此操作的示例：

function CustomSelect<
  Option,
  IsMulti extends boolean = false,
  Group extends GroupBase<Option> = GroupBase<Option>
>(props: Props<Option, IsMulti, Group>) {
  return (
    <Select {...props} theme={(theme) => ({ ...theme, borderRadius: 0 })} />
  );
}

它还解释了如何使用其他自定义道具来扩展道具：

您可以使用模块增强将自定义道具添加到选择道具类型中：

declare module 'react-select/dist/declarations/src/Select' {
  export interface Props<
    Option,
    IsMulti extends boolean,
    Group extends GroupBase<Option>
  > {
    myCustomProp: string;
  }
}

但我个人更喜欢只添加一个自定义界面，使用&具有自定义界面的角色来添加自定义道具（例如ReactSelectAsync，请参阅... & CustomSelectAsyncProps）：

interface CustomSelectAsyncProps {
  additionalCustomProp: number;
}

function SelectAsync<
  OptionType extends OptionTypeBase,
  IsMulti extends boolean = false,
  GroupType extends GroupTypeBase<OptionType> = GroupTypeBase<OptionType>
>({
  additionalCustomProp,
  ...props
}: Props<OptionType, IsMulti, GroupType> & CustomSelectAsyncProps) {
  return (
    <ReactSelectAsync {...props} />
  );
}

Answer 2

您可以Props直接从react-select包中导入类型。您可能想要扩展它，以便要求label和id都已定义。

import React from "react";
import ReactSelect, { Props } from "react-select";

type SelectProps = Props & {
  id: string;
  label: string;
};

const Select: React.FC<SelectProps> = ({id, label, ...rest}) => {
  return (
    <div>
      <label htmlFor={id}>{label}</label>
      <div>
        <ReactSelect {...{id, ...rest}} />
      </div>
    </div>
  );
};