使用图像填充react-select

Question

如何传递选项以在select中预览图像。我有国家选择，我想预览国家国旗。在这种情况下，我不知道如何传递"options“对象。

    var countries = 
    [
          {value: 'me', label: 'Montenegro'},
          {value:'rs',label: 'Serbia' }
    ];

   <Select name={"nationality_" + passenger.passengerId}
           value={passenger.nationality}
           options={countries}/>   

Answer 1

将countries中的标签更改为html。

​

const options = [
    { value: 'chocolate', label: <div><img src={copyIcon} height="30px" width="30px"/>Chocolate </div> },
    { value: 'strawberry', label: 'Strawberry' },
    { value: 'vanilla', label: 'Vanilla' },
  ];

​

像这样的add this将在select的选项中添加图像。

Answer 2

在我的例子中，当我想渲染国家标志时，我只需将第三个值添加到单个选项中，如下所示：

var countries = 
[
      {value: 'me', label: 'Montenegro', flagPath: <relative-path-to-flag>},
      {value:'rs',label: 'Serbia', flagPath: <relative-path-to-flag> }
];

如果你想要在下拉选项中呈现标志，使用'component.Option'，但它不会在选定的选项中显示标志，为此，你必须使用'component.SingleValue'，例如：

singleOption = (props: OptionProps<any>) => (
<components.Option {...props}>
  {props.data.flagPath? DO SOMETHING WITH YOUR ICON HERE : null}
  {props.label}
</components.Option>)


singleValue = (props: any) => (
<components.SingleValue {...props}>
  {props.data.flagPath?DO SOMETHING WITH YOUR ICON HERE: null}
</components.SingleValue>

)

然后，您必须使用Select中的组件，如下所示：

<Select
      ...
      components={{ 
        Option: this.singleOption, 
        SingleValue: this.singleValue
      }}
    />

希望它能帮助一些人解决这个问题:)

Answer 3

Gaurav的答案是有效的，但是你失去了根据标签搜索选项的能力。

相反，请使用适当的formatOptionLabel，它允许您更改默认格式：

const countries = [
  { value: 'me', label: 'Montenegro', image: '…' },
  { value:'rs', label: 'Serbia', image: '…' }
];

<ReactSelect
  value={passenger.nationality}
  options={countries}
  formatOptionLabel={country => (
    <div className="country-option">
      <img src={country.image} alt="country-image" />
      <span>{country.label}</span>
    </div>
  )}
/>  

从文档中：

formatOptionLabel

将菜单和控件中的选项标签格式化为React组件

https://react-select.com/props#select-props