如何使用 TypeScript 从包装的组件访问公共方法？

Question

我正在使用 TypeScript 开发一个 React 项目。他们将react-select组件包装到另一个组件中。包裹的组件如下：

import * as React from "react";
import Select from "react-select";
import { Props as SelectProps } from "react-select/lib/Select";

export interface SelectValue {
  label: string;
  value: string;
}

export interface SelectFieldProps<TValue> extends SelectProps<TValue> {
  label?: string;
}

type GenericSelectField<TValue> = React.StatelessComponent<
  SelectFieldProps<TValue>
>;

const SelectField: GenericSelectField<SelectValue> = ({
  label = "",
  ...rest
}) => (
    <div className="react-select-wrapper">
      {label ? <span className="input__label">{label}</span> : null}
      <Select classNamePrefix="react-select" {...rest} />
    </div>
  );

export default SelectField;

我想blur从 react-select访问该方法：

React-select 公开了两个公共方法：
...
blur() - 以编程方式模糊控件

但是，我不知道如何在我的组件中公开它，所以我可以调用它。有任何想法吗？

Answer 1

如果我理解正确的话，你想在SelectField内部触发Select 的模糊() 。

有很多方法，例如通过 props 进行父子绑定。这是关于此的讨论：

从父方法调用子方法