如何在 react-select 中的选项中添加图标？答案

【问题标题】：How to add an icon to the options in react-select?如何在 react-select 中的选项中添加图标？
【发布时间】：2020-02-15 08:46:03
【问题描述】：

尝试在 react-select 中为选项添加图标。我从england.svg、germany.svg 文件中导入了 svg 图标。我创建了customSingleValue 并将其放入

<Select components={{ SingleValue: customSingleValue }} />

显示标签，但不显示图标。

在这里演示：https://stackblitz.com/edit/react-q19sor

import Select from 'react-select'
import { ReactComponent as IconFlagEngland } from "./england.svg";
import { ReactComponent as IconFlagGermany } from "./germany.svg";

const options = [
  { value: 'England', label: 'England', icon: <IconFlagEngland/> },
  { value: 'Germany', label: 'Germany', icon: <IconFlagGermany/> }
]

const customSingleValue = ({ options }) => (
    <div className="input-select">
        <div className="input-select__single-value">
            { options.icon && <span className="input-select__icon">{ options.icon }</span> }
            <span>{ options.label }</span>
        </div>
    </div>
);

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React'
    };
  }

  render() {
    return (
       <Select
            defaultValue={ options [0] }
            options={ options }
            /*styles={ selectCustomStyles }*/
            /*onChange={ changeSelectHandler }*/
            components={ {SingleValue: customSingleValue } }
        />
    );
  }
}

render(<App />, document.getElementById('root'));

【问题讨论】：

标签： javascript css reactjs react-select

【解决方案1】：

我找到了解决方法。我的技术类似于@canda：

import React, { Component } from "react";
import { render } from "react-dom";
import "./style.css";
import Select, { components } from "react-select";

const options = [
  { value: "England", label: "England", icon: "england.svg" },
  { value: "Germany", label: "Germany", icon: "germany.svg" }
];

const { Option } = components;
const IconOption = props => (
  <Option {...props}>
    <img
      src={require('./' + props.data.icon)}
      style={{ width: 36 }}
      alt={props.data.label}
    />
    {props.data.label}
  </Option>
);

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: "React"
    };
  }

  render() {
    return (
      <Select
        defaultValue={options[0]}
        options={options}
        components={{ Option: IconOption }}
      />
    );
  }
}

render(<App />, document.getElementById("root"));

【讨论】：

发现修复，只是使用字体很棒的图标，tvm

【解决方案2】：

以防万一有人想在react-select 中使用多选图标，可以使用以下代码：

const { MultiValue } = components;

const MultiValueOption = (props) => {
  return (
    <MultiValue {...props}>
      <img
        src={require("./" + props.data.icon)}
        style={{ width: 36 }}
        alt={props.data.label}
      />
      <span>{props.data.value}</span>
    </MultiValue>
  );
};

<Select
  options={options}
  components={{
    Option: IconOption,
    MultiValue: MultiValueOption,
  }}
  isMulti={true}
></Select>;

【讨论】：

【解决方案3】：

我认为问题在于您实际上并没有导入 SVG。如果您尝试在任何地方直接在您的代码中使用<IconFlagGermany/>，它将因以下消息而严重崩溃：

元素类型无效：应为字符串（用于内置组件）或类/函数（用于复合组件）但得到：未定义。你可能忘记从定义它的文件中导出您的组件，或者您可能混淆了默认导入和命名导入。

它目前没有崩溃，因为我认为你的 customSingleValue 函数没有按照你的预期工作（没有调查它，但很确定它有问题）。

如果您希望能够以这种方式导入 SVG，则需要在 Webpack（或您选择的捆绑器）中设置适当的加载器。也许是这样的：https://www.npmjs.com/package/react-svg-loader

但是，另一种解决方案是将您的 SVG 正确导出为组件，例如从您的代码分叉的这个演示：https://stackblitz.com/edit/react-5gvytm

【讨论】：

选项文本旁边没有图标。