使用带有 react-select v2 的搜索图标

Question

任何人都知道如何在 react-select v2 中使用自定义图标？版本 1 曾经有一个arrowRenderer道具，您可以将它传递给一个可以呈现不同内容的函数。这似乎不适用于 v2。

这是我目前所拥有的：

renderSearchIcon = () => (
  <svg {...svgProps}>
    <path d={path} />
  </svg> 
)

<Select
  {...this.props}
  arrowRenderer={this.renderSearchIcon}
  defaultValue={defaultValue}
  options={options}
  onChange={onSelectChange}
/>

但出于某种原因，我仍然得到默认的下雪佛龙。任何人都知道是否可以在 v2 上执行此操作？

Answer 1

https://github.com/JedWatson/react-select/issues/685#issuecomment-420213835

https://react-select.com/components

示例片段：

import Select, { components } from 'react-select';

const DropdownIndicator = props => {
  return (
    components.DropdownIndicator && (
      <components.DropdownIndicator {...props}>
        <FontAwesomeIcon icon={props.selectProps.menuIsOpen ? "caret-up" : "caret-down"}/>
      </components.DropdownIndicator>
    )
  );
};


<Select
  components={{ DropdownIndicator }}
  // pass other props
/>