react-select 多标签中文本旁边的图标

Question

我正在使用 react-select 并希望图标显示在每个可以通过 multiSelect 添加和删除的标签的文本旁边。

const data = [
  { label: <svg /> && 'keyword one', value: 'keyword one' },
];

仅显示 svg 或文本。有人知道解决这个问题的方法吗？

Answer 1

您必须创建自定义 Option 组件。

请参阅此 link 自定义选项组件：

另外，我创建了这个示例 sandbox 示例。请原谅我糟糕的 CSS 造型。

Answer 2

您 && 的使用方式有误。有关详细信息，请参阅 short circuit evaluation。 label 也可以接受 ReactNode，要解决这个问题，定义选项数组如下：

const options = [
  {
    value: "ocean",
    label: (
      <>
        <YourIcon /> Ocean
      </>
    ),
    color: "#00B8D9",
    isFixed: true
  },
  {
    value: "blue",
    label: (
      <>
        <YourIcon /> Blue
      </>
    ),
    color: "#0052CC"
  },
  {
    value: "purple",
    label: (
      <>
        <YourIcon /> Purple
      </>
    ),
    color: "#5243AA"
  }
];

react-select 多标签中文本旁边的图标

Icon next to text in react-select mutli label

javascript

reactjs

react-select