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

Question

尝试向 react-select 中的选项添加图标。我从文件england.svg, 中导入了 svg 图标germany.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'));

Answer 1

我找到了解决方法。我的技术类似于@canda：import React, { Component } from "react";import { render } from "react-dom";import "./style.css";import Select, { components } from "react-select";const options = [&nbsp; { value: "England", label: "England", icon: "england.svg" },&nbsp; { value: "Germany", label: "Germany", icon: "germany.svg" }];const { Option } = components;const IconOption = props => (&nbsp; <Option {...props}>&nbsp; &nbsp; <img&nbsp; &nbsp; &nbsp; src={require('./' + props.data.icon)}&nbsp; &nbsp; &nbsp; style={{ width: 36 }}&nbsp; &nbsp; &nbsp; alt={props.data.label}&nbsp; &nbsp; />&nbsp; &nbsp; {props.data.label}&nbsp; </Option>);class App extends Component {&nbsp; constructor() {&nbsp; &nbsp; super();&nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; name: "React"&nbsp; &nbsp; };&nbsp; }&nbsp; render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <Select&nbsp; &nbsp; &nbsp; &nbsp; defaultValue={options[0]}&nbsp; &nbsp; &nbsp; &nbsp; options={options}&nbsp; &nbsp; &nbsp; &nbsp; components={{ Option: IconOption }}&nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; );&nbsp; }}render(<App />, document.getElementById("root"));

Answer 2

以防万一有人想在 中使用多选图标，react-select可以使用以下代码：const { MultiValue } = components;const MultiValueOption = (props) => {&nbsp; return (&nbsp; &nbsp; <MultiValue {...props}>&nbsp; &nbsp; &nbsp; <img&nbsp; &nbsp; &nbsp; &nbsp; src={require("./" + props.data.icon)}&nbsp; &nbsp; &nbsp; &nbsp; style={{ width: 36 }}&nbsp; &nbsp; &nbsp; &nbsp; alt={props.data.label}&nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; <span>{props.data.value}</span>&nbsp; &nbsp; </MultiValue>&nbsp; );};<Select&nbsp; options={options}&nbsp; components={{&nbsp; &nbsp; Option: IconOption,&nbsp; &nbsp; MultiValue: MultiValueOption,&nbsp; }}&nbsp; isMulti={true}></Select>;

Answer 3

我认为问题在于您实际上并未导入 SVG。如果您尝试<IconFlagGermany/>在代码中的任何地方直接使用，它会因以下消息而严重崩溃：元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件）但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。它目前没有崩溃，因为我认为您的customSingleValue功能没有按照您的预期工作（还没有研究它，但很确定它被窃听了）。如果您希望能够以这种方式导入 SVG，您需要在 Webpack（或您选择的打包器）中设置一个合适的加载器。也许是这样的：https&nbsp;:&nbsp;//www.npmjs.com/package/react-svg-loader但是，另一种解决方案是将您的 SVG 正确导出为组件，就像从您的代码中分叉的这个演示中一样：https&nbsp;:&nbsp;//stackblitz.com/edit/react-5gvytm