如何在react.js中向选择的选项添加图标/图像？

Question

假设这是我的下拉菜单，那么如何将图像添加到选项中？

knp_paginator:
page_range: 5                       # number of links showed in the pagination menu (e.g: you have 10 pages, a page_range of 3, on the 5th page you'll see links to page 4, 5, 6)
default_options:                                 
    page_name: page                 # page query parameter name
    sort_field_name: sort           # sort field query parameter name
    sort_direction_name: direction  # sort direction query parameter name
    distinct: true                  # ensure distinct results, useful when ORM queries are using GROUP BY statements
    filter_field_name: filterField  # filter field query parameter name
    filter_value_name: filterValue  # filter value query parameter name
template:                                        
    pagination: '@KnpPaginator/Pagination/sliding.html.twig'     # sliding pagination controls template                                    
    sortable: '@KnpPaginator/Pagination/sortable_link.html.twig' # sort link template                                
    filtration: '@KnpPaginator/Pagination/filtration.html.twig'  # filters template

Answer 1

就像html CSS一样 使用“ data-icon”属性，我们可以将所有glyphicon图标添加到选项或optgroup

<select class="selectpicker">
  <option data-icon="glyphicon-music">Option1</option>
  <option data-icon="glyphicon-star">Option2</option>
  <option data-icon="glyphicon-glass">Option3</option>
</select>

来自thewebfosters