如何使用帶有選擇選項表單元素的反應圖標？

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

上面的代碼呈現了以下組件：