1

如何在选择下拉菜单中添加图标？

我的代码是：

import React, { Component } from 'react';

import Icon from '@mdi/react'
import { mdiFormatAlignLeft } from '@mdi/js';
import { mdiCheckboxMarked } from '@mdi/js';
import { IoMdRadioButtonOn } from 'react-icons/io';

class AddNewQuestion extends Component {

  render() {
    return (
        <div>
          <select>
            <option value='multiple'><Icon path={mdiCheckboxMarked} /> Multiple choice</option>
            <option value='single'><IoMdRadioButtonOn /> Single choice</option>
            <option value='open'><Icon path={mdiFormatAlignLeft} /> Open question</option>
          </select>
        </div>

    )
  }
}

我得到的不是图标，而是 [object Object]。 截屏

我试图将 MD 图标作为网络字体，如下所述：https ://dev.materialdesignicons.com/getting-started/webfont但我也得到了 [object Object]。

任何想法如何做到这一点？

4

1 回答 1

1

<select>并且<option>是本机 UI 元素，因此您受限于用户的操作系统如何呈现它们。<option>元素只能包含文本字符串，不能包含 HTML 或 React 节点。

您正在寻找类似Material UI Select Component的东西，它创建自己的 DOM 元素来模拟使用 a 的体验<select>，让您能够对其进行样式设置、将图标元素添加到下拉选项等。

于 2020-05-26T18:31:46.873 回答