react-bootstrap-typeahead TypeScript-Ref-getInstance 不存在

Question

我正在使用react-bootstrap-typeahead打字稿，添加了来自

@types/react-bootstrap-typeahead

的类型

在 React 功能组件的 typeahead 中，我尝试访问 typeahead ref 并调用组件的公共方法，如here

所示

从 'react-bootstrap-typeahead' 导入 { Typeahead };

const typeahead = React.createRef();

<Typeahead
ref={(ref) => typeahead = ref}
id="basic-typeahead-single"
filterBy={['dialCode', 'name']}
inputProps={{
    className: 'attrib',
}}
labelKey={(option: any) => `${option.name}`}
onChange={(selected: any) => {
    console.log(selected);
}}
renderMenuItemChildren={(option) => (
    <div>
        <div>{option.name}   {option.section}</div>
    </div>
)}
options={employeeList}
selected={state.internationalization}>
</Typeahead>
<span className="arrow" onClick={() => {
    const instance = typeahead.getInstance();
    console.log("instance", instance);
    instance.clear();
    instance.focus();
}}><img src="/arrow.svg" /></span> 

它抛出错误 - 属性“getInstance”在类型“RefObject”上不存在

所以在创建参考时我尝试过：

const typeahead = React.createRef<Typeahead>();

但打字稿似乎缺少一些东西

Answer 1

您从

typeahead

创建的变量

createRef

是一个

RefObject

，其属性

current

引用您的组件。

创建引用时，需要使用泛型指定组件类型。 正如您所看到的，

Typeahead

类本身是泛型的，但泛型类型对于您想要执行的操作并不重要，因此您可以使用

any

来表示它是对

Typeahead

组件的引用任何类型的数据。

const typeahead = React.createRef<Typeahead<any>>();

由于我们使用新的

createRef

语法而不是旧的回调引用，因此当您将 ref 传递给组件时，您只需传递整个 ref 对象。

<Typeahead ref={typeahead} ... />

要访问实例，请查看 ref 的

.current

属性，它是

null

或

Typeahead<any>

。

const instance = typeahead.current;

但是至于调用方法，你仍然会得到一个错误。 无论出于何种原因，这些存在于类中的公共方法都没有记录在类型定义中，因此打字稿不知道它们。

您可能想向任何类型维护者提出这个问题，或者自己编辑

@types/react-bootstrap-typeahead

包，因为这似乎是一个疏忽。

但您也可以扩展自己的类型。

declare module "react-bootstrap-typeahead" {
    interface Typeahead<T extends TypeaheadModel> extends React.Component<TypeaheadProps<T>> {
        clear(): void;
        focus(): void;
    }
}

在调用任何方法之前，您需要确保

typeahead

不是

null

。 最简洁的方法是使用可选的链接

?.

const instance = typeahead.current;
instance?.clear();
instance?.focus();

Typescript Playground 链接

Answer 2

react-bootstrap-typeahead 在类型 @types/react-bootstrap-typeahead 中有 TypeaheadRef，只需使用它即可

import { AsyncTypeahead, TypeaheadRef } from 'react-bootstrap-typeahead';
...
const typeaheadRef = React.createRef<TypeaheadRef>();