ReactJS - 反应选择 - 多种文本颜色答案

【问题标题】：ReactJS - react-select - multiple text colorReactJS - 反应选择 - 多种文本颜色
【发布时间】：2021-10-09 03:36:02
【问题描述】：

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

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

现在显然这不适用于 HTML 选择，但我可以用 react-select 做类似的事情吗？如果没有，有人可以提出替代方案吗？

更新

我也尝试了 select2，但没有成功，我试图做的事情是不可能的吗？

【问题讨论】：

标签： html css reactjs jquery-select2

【解决方案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/

【讨论】：