react-multi-select如何渲染含图片、div的自定义下拉卡片组件

react-multi-select 完全支持渲染包含图片、嵌套div结构的复杂自定义选项UI，不需要局限于纯文本标签。组件暴露的itemRenderer属性就是用来接管选项全量渲染逻辑的，你可以在里面返回任意合法React节点。

具体实现方法 #

• 先把你的业务数据映射为组件可识别的options格式，不需要修改原有业务字段，补充组件要求的唯一标识字段即可
• 编写自定义选项渲染函数，接收当前选项数据、选中状态、点击回调等参数，返回你需要的卡片结构
• 记得把点击回调绑定到自定义卡片的最外层容器，保证选中/取消选中的交互正常生效

代码示例 #

1. 自定义卡片组件 #

const CardOption = ({ item, onClick, selected }) => {
  return (
    <div 
      onClick={onClick}
      style={{
        padding: '12px',
        margin: '8px',
        borderRadius: '8px',
        cursor: 'pointer',
        border: selected ? '1px solid #1677ff' : '1px solid #f0f0f0',
        background: selected ? '#e6f4ff' : '#ffffff'
      }}
    >
      {/* 可自由插入图片、任意嵌套结构，示例：
      <img 
        src={item.cover} 
        alt={item.title}
        style={{width: '100%', borderRadius: '4px', marginBottom: '8px'}}
      /> */}
      <div style={{fontSize: 16, fontWeight: 600, marginBottom: 8}}>{item.title}</div>
      <div style={{display: 'flex', gap: 24, fontSize: 14, color: '#666'}}>
        <span>供应量：{item.supply}</span>
        <span>持有者数：{item.owners}</span>
      </div>
    </div>
  )
}

2. 改造后的Multiselect组件用法 #

// 你的业务原始数据
const data = [
  {
    id: 1,
    title: 'Test1',
    supply: 1,
    owners: 5, 
  },
  {
    id: 2,
    title: 'Test2',
    supply: 10,
    owners: 50, 
  },
  {
    id: 3,
    title: 'Test3',
    supply: 100,
    owners: 500, 
  },
]

<Multiselect
    defaultMenuIsOpen
    placeholder=""
    {...field}
    inputRef={ref}
    displayValue="title"
    itemRenderer={CardOption}
    onSelect={(selected, item) => {
        setValue('test', selected)
    }}
    onRemove={(selected, item) => {
        setValue('test', selected)
    }}
    options={data.map(item => ({
      ...item,
      value: item.id,
      name: item.title
    }))}
/>

你当前使用默认渲染逻辑的效果如下：

补充说明 #

• 如果你需要自定义已选中标签在输入框内的展示样式，还可以使用组件提供的selectedRenderer属性，用法和itemRenderer一致
• 卡片内可以自由添加图标、按钮、富文本等任意内容，组件不会限制渲染结构
• 如果需要给选项加额外交互（比如选项上的快捷操作按钮），注意阻止事件冒泡，避免触发选项选中逻辑

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