React中选择选项中的材料设计和离子体。

Question

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

我的代码是

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>

    )
  }
}

我得到的是[对象对象]，而不是图标。

我试着把MD图标作为一个webfont，就像这里描述的那样。https:/dev.materialdesignicons.comgetting-startedwebfont。 但我也得到[object对象]。

有什么办法吗？

Answer 1

<select> 和 <option> 是原生UI元素，所以你会受制于用户的操作系统如何渲染它们。<option> 元素只能包含文本字符串，而不是HTML或React节点。

你要找的是类似于 材质UI选择组件，它创建了自己的DOM元素，以模拟使用的体验。<select>，让你能够对其进行样式设计，为下拉选项添加图标元素等。