react-bootstrap-typeahead 扩展自定义组件，typeahead props 需要 1 个参数

如何解决react-bootstrap-typeahead 扩展自定义组件，typeahead props 需要 1 个参数

我正在尝试使用我开发的库制作一个自定义 typeahead 组件，该组件具有额外的道具来生成一个带有 from 组、标签等的字段。

当我使用下面的代码时，Typeahead props 带有红色下划线，并且出现错误：通用类型“TypeaheadProps”需要 1 个参数。我不确定这个论点应该是什么？

import React from "react";
import FormValidator from "../../utilities/FormValidator";
import {observer} from "mobx-react";
import {
    FormFeedback,FormGroup,FormText,Label
} from "reactstrap";
import {Typeahead,TypeaheadProps} from "react-bootstrap-typeahead";

interface IFormTypeaheadProps extends TypeaheadProps{
    // the form validation class
    formValidator: FormValidator,// the name of the property to edit
    propName: string,// the keyto use to access any error message in formValidator.formErrors
    errorKey?: string,// the label for the text field
    label?: string,// any data prop which overrides default formValidator.dataStore.data prop
    data?: any,// a caption which will show with a <FormText /> element
    caption?: string
}

const FormTypeahead: React.FC<IFormTypeaheadProps> = ({ formValidator,propName,data,label,caption,errorKey,...atts }) => {

    // any validation error message
    const eKey = errorKey || propName;

    return (
        <FormGroup>
            {label ? <Label>{label}</Label> : null}
            <Typeahead
                isInvalid={typeof formValidator.formErrors[eKey] !=='undefined'}
                {...atts} />
            {typeof formValidator.formErrors[eKey] !== 'undefined'
            ? (
                <FormFeedback>{formValidator.formErrors[eKey]}</FormFeedback>
            ) : null}
            {caption ? <FormText>{caption}</FormText> : null}
        </FormGroup>
    )
}

export default observer(FormTypeahead);

---

似乎参数应该是在 options 属性中传递的选项的接口。目前，在确认这一点之前，我一直使用“任何”。

解决方法

这里有一个例子。基本上，如果您想添加任何不属于您的界面的额外参数，您可以像这样声明它。

type customTypeAheadModel = TypeaheadModel & {
  UserId: string
}

interface IFormTypeaheadProps extends TypeaheadProps<customTypeAheadModel>{
  // the form validation class
 formValidator: FormValidator,// the name of the property to edit
  propName: string,// the keyto use to access any error message in formValidator.formErrors
  errorKey?: string,// the label for the text field
  label?: string,// any data prop which overrides default formValidator.dataStore.data prop
  data?: any,// a caption which will show with a <FormText /> element
  caption?: string
}