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

Posted 2023-05-07

【中文标题】ReactJS - 反应选择 - 多种文本颜色

【英文标题】：ReactJS - react-select - multiple text color

【发布时间】：2021-10-09 03:36:02

【问题描述】：

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

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

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

更新

我也尝试了 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/