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} />
    ),
  }} />;
};

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

1 个答案: