react-select多选组件如何在标签文本旁显示图标

问题原因 #

你当前的写法误用了JavaScript的&&逻辑运算符：逻辑与表达式会返回第一个假值，或最后一个真值，因此<svg /> && 'keyword one'永远只会返回图标和文本其中一个，自然无法同时显示。
react-select的label字段本身支持传入任意合法React节点，你只需要将图标和文本放在同一个容器节点中即可实现同时展示。

两种方案都可以同时实现下拉选项、选中标签的图标+文本展示，可根据项目实际场景选择

实现方案 #

方案1：直接修改label字段（适合少量选项场景） #

直接用React空标签（Fragment）包裹图标和文本即可：

const data = [
  {
    label: <>
      <svg {/* 你的svg图标原有属性 */} />
      <span style={{ marginLeft: '4px' }}>keyword one</span>
    </>,
    value: 'keyword one'
  },
  // 其余选项配置同理
];

方案2：自定义组件统一渲染（适合大量选项场景） #

如果选项数量多，建议把图标拆分到单独字段，自定义react-select的内置组件统一渲染，代码可维护性更高：

1. 调整数据结构，拆分图标和文本：

const data = [
  {
    label: 'keyword one',
    value: 'keyword one',
    // 单独存储对应图标
    icon: <svg {/* 你的svg图标原有属性 */} />
  }
];

2. 自定义下拉选项和选中标签的渲染组件：

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

// 自定义下拉列表的选项组件
const CustomOption = (props) => {
  return (
    <components.Option {...props}>
      {props.data.icon}
      <span style={{ marginLeft: '4px' }}>{props.data.label}</span>
    </components.Option>
  );
};

// 自定义多选模式下选中的可删除标签组件
const CustomMultiValueLabel = (props) => {
  return (
    <components.MultiValueLabel {...props}>
      {props.data.icon}
      <span style={{ marginLeft: '4px' }}>{props.data.label}</span>
    </components.MultiValueLabel>
  );
};

// 组件使用时传入自定义配置
const MyMultiSelect = () => {
  return (
    <Select
      isMulti
      options={data}
      components={{ Option: CustomOption, MultiValueLabel: CustomMultiValueLabel }}
      {/* 其余你原有配置项 */}
    />
  );
};

内容的提问来源于stack exchange，提问作者8245734589