Javascript 如何将图标添加到react select中的选项？

尝试向“反应选择”中的选项添加图标。我从文件

england.svg

，

germany.svg

导入了svg图标。我创建了

customSingleValue

并将其放入

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

显示标签，但不显示图标

此处演示：

从“反应选择”导入选择
从“/england.svg”导入{ReactComponent as IconFlagEngland}；
从“/germany.svg”导入{ReactComponent as IconFlagGermany}；
常量选项=[
{值：'England'，标签：'England'，图标：}，
{值：“德国”，标签：“德国”，图标：}
]
常量customSingleValue=（{options}）=>(
{options.icon&&{options.icon}
{options.label}
);
类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
名称：“反应”
};
}
render（）{
返回(
);
}
}
render（，document.getElementById（'root'））；

我认为问题在于您实际上没有导入SVG。如果您试图在任何地方的代码中直接使用

，则会出现以下消息：

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

它目前没有崩溃，因为我认为您的

customSingleValue

函数没有按照您的预期工作（没有研究过它，但很确定它被窃听了）

如果您希望能够以这种方式导入SVG，则需要在Webpack（或您选择的绑定器）中设置适当的加载程序。也许是这样的：

---

然而，另一个解决方案是将SVG正确地导出为组件，就像从代码中派生出来的这个演示：

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

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"));

import React，{Component}来自“React”；
从“react dom”导入{render}；
导入“/style.css”；
从“反应选择”导入选择，{components}；
常量选项=[
{值：“英格兰”，标签：“英格兰”，图标：“England.svg”}，
{值：“德国”，标签：“德国”，图标：“Germany.svg”}
];
常量{Option}=组件；
const IconOption=props=>(
{props.data.label}
);
类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
名称：“反应”
};
}
render（）{
返回(
);
}
}
render（，document.getElementById（“根”））；

如果有人想在

反应选择中使用具有多选功能的图标，可以使用以下代码：

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>;

const{MultiValue}=组件；
常量多值选项=（道具）=>{
返回(
{props.data.value}
);
};
;
option text.spot on fix旁边没有图标，只需使用fontawesome图标，tvm
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>;