在 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}
/>

但出于某种原因，我仍然使用默认的向下 V 形。有人知道是否可以在 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
/>

在 react-select v2 中使用搜索图标

Use search icon with react-select v2

reactjs

react-select