Question

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

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

编辑：这是以上尝试的结果： The font awesome icon is not being found

Answer 1

react-select灵活允许label option传递PropTypes.node。

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

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

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

Answer 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} />

Answer 3

创建自定义组件并用作标签对我来说很有效：

const DropdownRow = ({ label }) => (
  <Div style={{ height: '100%', display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
    <MyIcon size={24} color="white" />
    <div style={{ marginLeft: '10px' }}>
      {label}
    </div>
  </Div>
);

在选项：

options={OPTIONS.map(({ value, label }) => ({
          value,
          label: <DropdownRow label={label} />
        }))}

使用此代码，我可以添加一个图标和标签文本

在React-Select v2中使用Awesome字体图标？

3 个答案: