ReactJS -ReactJS选择-多个文本颜色

Question

我被要求为某个下拉选项设置多个文本颜色，如下所示：

<select>
        <option>Test <span style="color:red;">New</span></option>
</select> 

现在，这显然不适用于HTML，但我将能够使用react select执行类似的操作。如果没有，有人能提出一个替代方案吗？

更新

我也尝试过用select2，没有起作用，是我想要的不可能吗？

Answer 1

使用select2是可能的，下面是关于如何使用templateResult和templateSelection实现这一点的想法

​

var data = [{
  id: 0,
  text: '<span>Test <span style="color:red;">New</span></span>'
}];

$("select").select2({
  data: data,
  templateResult: function(d) {
    return $(d.text);
  },
  templateSelection: function(d) {
    return $(d.text);
  },

})

.select2-dropdown {
  margin-top: 10px;
  margin-left: 8px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>

<select></select>

​

小提琴：https://jsfiddle.net/3z2txkba/