react-select自定义菜单选项时如何让选中项仅展示对应value值

完全可以实现自定义选中项格式化规则，react-select官方已经预留了对应的配置能力，常用有两种实现方案：

方案1：利用formatOptionLabel的内置上下文参数 #

formatOptionLabel方法自带第二个参数，包含context属性用来区分当前渲染的场景：

• context === 'menu'：当前渲染的是下拉列表内的候选选项
• context === 'value'：当前渲染的是输入框内的已选中值

直接根据场景判断返回不同内容即可，示例代码如下：

import Select from 'react-select';

// 模拟选项数据
const options = [
  { value: 'apple', label: '苹果', extraInfo: '富含维生素C' },
  { value: 'orange', label: '橙子', extraInfo: '酸甜多汁' }
];

const customFormatOption = (option, { context }) => {
  // 下拉候选选项展示完整自定义样式
  if (context === 'menu') {
    return (
      <div className="custom-option">
        <h4>{option.label}</h4>
        <p style={{ fontSize: '12px', color: '#666', margin: 0 }}>{option.extraInfo}</p>
      </div>
    )
  }
  // 已选中状态仅返回value值
  if (context === 'value') {
    return option.value
  }
}

function App() {
  return (
    <Select 
      options={options}
      formatOptionLabel={customFormatOption}
    />
  )
}

该方案代码逻辑集中，适合两种格式化规则复杂度不高的场景。

方案2：拆分使用两个独立prop #

如果两种格式化逻辑复杂度很高，需要拆分维护，可以分开配置两个prop：

• 用formatOptionLabel仅控制下拉候选选项的展示样式
• 用getOptionLabel仅控制已选中值的展示内容

示例代码如下：

import Select from 'react-select';

const options = [
  { value: 'apple', label: '苹果', extraInfo: '富含维生素C' },
  { value: 'orange', label: '橙子', extraInfo: '酸甜多汁' }
];

// 仅处理下拉选项的格式化
const formatMenuOption = (option) => {
  return (
    <div className="custom-option">
      <h4>{option.label}</h4>
      <p style={{ fontSize: '12px', color: '#666', margin: 0 }}>{option.extraInfo}</p>
    </div>
  )
}

// 仅处理选中值的格式化
const formatSelectedValue = (option) => {
  return option.value
}

function App() {
  return (
    <Select 
      options={options}
      formatOptionLabel={formatMenuOption}
      getOptionLabel={formatSelectedValue}
    />
  )
}

内容的提问来源于stack exchange，提问作者Susitha Ravinda Senarath