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

Question

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

当我使用下面的代码时，Typeahead props 带有红色下划线，我收到错误消息：Generic type 'TypeaheadProps' requires 1 argument。我不确定那个论点应该是什么？

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 属性中传递的选项的接口。目前，在我确认之前，我一直使用“any”。

Answer 1

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

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
}