使用带有 react-select v2 的 Font Awesome 图标？答案

【问题标题】：Using a Font Awesome Icon with react-select v2?使用带有 react-select v2 的 Font Awesome 图标？
【发布时间】：2019-02-05 20:27:39
【问题描述】：

使用：https://react-select.com/home 我一直在尝试以下想法的变体：

 const hex = 'f2bc';
 const char = unescape('%u' + hex);
 <Select
   defaultValue={ label: char, value: 'some-value'}
   ...={...}/>

这是上述尝试的结果：

【问题讨论】：

你尝试了什么，你的预期结果是什么，你有什么结果？
你是如何加入 Font Awesome 的？
另外，f2bc doesn't seem to exist。它应该是哪个图标？
@JJJ 你是对的，那个图标不存在。任何图标都可以，我一定是打错了。我也试图只使用 unicode 并且不包括 Font Awesome，但我认为这是不可能的。我明白了，因为在 chrome 控制台中运行它会返回 TM 图标： let unicode = '2122'; let convertUnicode = unescape('%u' + unicode); console.log(convertedUnicode)

标签： reactjs font-awesome react-select

【解决方案1】：

react-select 可以灵活地允许将PropTypes.node 传递给label option。

font-awesome 图标 can be used with className 应用于 HTMLSpan 元素，例如

const labelWithIcon = <span className="fas fa-stroopwafel" />

<Select defaultValue={{ label: labelWithIcon, value: 'some-value' }} />

【讨论】：

在此配置中，工具提示显示“[object object]”
在我看来，您正在与 react-select 一起使用不同的库。我认为这不是原始问题的一部分。

【解决方案2】：

要显示图标而不是文本，您可以这样做：

const options = [
      { value: "text", label: <FontAwesomeIcon icon={faFileAlt} /> },
      { value: "image", label: <FontAwesomeIcon icon={faFileImage} /> },
      { value: "video", label: <FontAwesomeIcon icon={faFileVideo} /> }
];

<Select  placeholder="Text"  options={options} />

【讨论】：