reactjs - 如何使用带有选择选项表单元素的反应图标？

Question

我想知道是否可以将 react-icons 与 select-option 元素一起使用。我在谷歌上搜索了很多关于这个问题的信息，但所有的解决方案都与 react-select 库相关，而不是简单的 select-option 元素。

这就是我在做什么

import {ReactIcon} from "react-icons";
.............
 some code here
.............
<select> 
    <option> sometext <ReactIcon /> </option>
   <option>  sometext <ReactIcon /> </option>
</select>

结果：

sometext [Object object]
sometext [Object object]

我想要的是：

sometext {the icon itself}  
sometext {the icon itself}

谢谢

Answer 1

仅支持字符串和数字作为<option>子项。因此图标未呈现。

您需要使用 React Select 组件，例如react-select。这适用于react-icons。

具有上述组件的工作示例：

import Select from "react-select";
import {
  AiFillAlert,
  AiFillAlipayCircle,
  AiFillContainer
} from "react-icons/ai";
import { useState } from "react";

export default function App() {
  const [selectedOption, setSelectedOption] = useState(null);
  // The label supports JSX.
  const options = [
    {
      value: "chocolate",
      label: (
        <div>
          <AiFillAlert /> Chocolate
        </div>
      )
    },
    {
      value: "strawberry",
      label: (
        <div>
          <AiFillAlipayCircle /> Strawberry
        </div>
      )
    },
    {
      value: "vanilla",
      label: (
        <div>
          <AiFillContainer /> Vanilla
        </div>
      )
    }
  ];

  return (
    <div className="App">
      <Select value={selectedOption} options={options} />
    </div>
  );
}

上面的代码呈现了以下组件：