React-select下拉选项不显示图标，如何为每个选项配置自定义图标？

问题根因 #

你当前使用的optionRenderer、valueRenderer是react-select v1版本的废弃API，v2及以上版本已经统一改为通过components属性传入自定义渲染组件，这是下拉选项无法显示图标的核心原因。另外你当前仅给components配置了选中值的自定义渲染组件SingleValue，没有配置下拉选项的渲染组件，也会导致下拉列表里的选项无图标。

代码修改方案 #

你只需要调整Select组件的配置，增加自定义Option组件即可，修改后的完整代码如下：

import React, { useState } from "react";
import Select from "react-select";
import CheckSquare from "./CheckSquare";
import FontAwesome from "react-fontawesome";
import Clock from "./Clock";

// 自定义选中后显示的内容
const customSingleValue = ({ data }) => (
  <div className="input-select">
    <div className="input-select__single-value">
      {data.icon && <span className="input-select__icon">{data.icon}</span>}
      <span>{data.label}</span>
    </div>
  </div>
);

// 新增：自定义下拉列表内的选项渲染
const customOption = ({ data, innerProps, innerRef }) => (
  <div ref={innerRef} {...innerProps} className="presenceOption">
    <span className="input-select__icon">{data.icon}</span>
    <span>{data.label}</span>
  </div>
);

const UserInfo = () => {
  const statusOptions = [
    { value: "available", label: "Available", icon: <CheckSquare /> },
    { value: "dnd", label: "Busy", icon: <Clock /> },
    { value: "away", label: "Away", icon: <Clock /> },
    { value: "Right back away", label: "back", icon: <CheckSquare /> }
  ];
  // 给state加默认值避免undefined报错
  const [presence, setPresence] = useState(statusOptions[0]);
  const changeSelectHandler = (pres) => {
    setPresence(pres);
    console.log(pres);
  };

  return (
    <Select
      value={presence}
      defaultValue={statusOptions[0]}
      options={statusOptions}
      clearable={false}
      onChange={changeSelectHandler}
      // 把两个自定义组件都传入components，移除废弃的optionRenderer、valueRenderer
      components={{ SingleValue: customSingleValue, Option: customOption }}
    />
  );
};

export default UserInfo;

样式补充 #

可以增加以下CSS调整图标和文字的间距，更贴合你要的效果：

.input-select__icon {
  display: inline-block;
  margin-right: 8px;
  vertical-align: middle;
}
.presenceOption {
  padding: 8px 12px;
  cursor: pointer;
}
.presenceOption:hover {
  background-color: #f0f0f0;
}

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