创建定制组件时如何使用反应选择类型？

Question

我正在尝试为DropdownIndicator创建自定义组件，并在Typescript上对react-select进行使用，但是由于我是Typescript的新手，所以我在组件类型方面遇到了一些问题。

如何使用在组件上@ types / react-select定义的类型？

我已经安装了@ types / react-select，并且已经有一个type for DropdownIndicator，但是我找不到引用它的方法。

这是我的index.tsx：

import React from 'react';
import Select from 'react-select';

import DropdownIndicator from './dropdown-indicator';

const components = {
  DropdownIndicator,
};

const SelectFilter: React.FC = () => {
  return <Select components={components} />;
};

export default React.memo(SelectFilter);

这是我的dropdown-indicator.tsx：

import React from 'react';

import DropdownIcon from './dropdown-icon';

const DropdownIndicator: React.FC = props => {
  const {
    selectProps: { isMenuOpen },
  } = props;

  return <DropdownIcon isUp={isMenuOpen} />;
};

export default React.memo(DropdownIndicator);

由于我没有定义任何道具类型，所以错误是：

/Users/felipepinheiro/Workspace/test/src/components/select-filter/dropdown-indicator.tsx
TypeScript error in /Users/felipepinheiro/Workspace/test/src/components/select-filter/dropdown-indicator.tsx(7,5):
Property 'selectProps' does not exist on type '{ children?: ReactNode; }'.  TS2339

     5 | const DropdownIndicator: React.FC = props => {
     6 |   const {
  >  7 |     selectProps: { isMenuOpen },
       |     ^
     8 |   } = props;
     9 | 
    10 |   return <DropdownIcon isUp={isMenuOpen} />;

Answer 1

您可以直接从react-select包中导入IndicatorProps类型，然后将props从选择组件中直接传递给组件

import {IndicatorProps } from 'react-select';


const SelectFilter: React.FC = () => {
  return <Select components={{
    Indicator: (indicatorProps: IndicatorProps<any>) => (
      <components.DropdownIndicator {...indicatorProps} />
    ),
  }} />;
};