Question

我为我的 react-project 自定义了一个 react-select 下拉组件。当我尝试使用 React.HTMLAttributes。它显示“没有与此调用匹配的过载”。我试图扩展不同的属性以获得默认值，如 id、标签、名称、占位符等。如何获得道具内的默认属性？有没有人遇到过类似的问题？

示例代码：

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

您可以直接从 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> = (props) => {
  return (
    <div>
      <label htmlFor={props.id}>{props.label}</label>
      <div>
        <ReactSelect {...props} />
      </div>
    </div>
  );
};

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

1 个答案: