Javascript React.js:contentEditable div不呈现嵌套的跨度元素

我有一个contentEditable div，在这里我试图更新用户输入的单词的颜色。当我检测到一个我想要着色的单词时，我将它包装在

元素中

问题是，

元素没有正确呈现，span元素的原始HTML显示如下：

bla-bla-bla关键字和颜色bla-bla-bla-bla

我该如何解决这个问题？这和React有关吗

这是我用来生成进入contentEditable div的文本的代码。我将结果存储在

render（）

中的一个变量中，并使用

{text}

将其直接传递到contentEditable div中

function formatDateKeywords(name, keyword) {
  var startIndex = name.indexOf(keyword);
  var endIndex = startIndex + keyword.length;
  var res =
    name.substring(0, startIndex) +
    "<span class='text-primary'>" +
    keyword +
    "</span>" +
    name.substring(endIndex, name.length);

  return res;
}

函数formatDateKeywords（名称、关键字）{
var startIndex=name.indexOf（关键字）；
var endIndex=startIndex+keyword.length；
var res=
名称.子字符串（0，startIndex）+
"" +
关键词+
"" +
name.substring（endIndex，name.length）；
返回res；
}

这就是div的外观：

<div
    contentEditable="true"
    suppressContentEditableWarning={true}
    id="addItemInput"
    data-placeholder={placeholder}
    className="form-control text-left editable"
    type="text"
    onInput={(e) => this.handleInput(e)}
    onKeyDown={(e) => this.keyPress(e)}
>
    {formattedText}
</div>

this.handleInput（e）}
onKeyDown={（e）=>this.keyPress（e）}
>
{格式化文本}

在reactjs中，您必须使用JSX将标记添加到内容中： 我使用React.Fragment来避免添加未使用的标记

function formatDateKeywords(name, keyword) {
  var startIndex = name.indexOf(keyword);
  var endIndex = startIndex + keyword.length;
  var res = <>
        {name.substring(0, startIndex)}
        <span class='text-primary'>{keyword}</span>
        {name.substring(endIndex, name.length)}
    </>;

  return res;
}

函数formatDateKeywords（名称、关键字）{
var startIndex=name.indexOf（关键字）；
var endIndex=startIndex+keyword.length；
var res=
{name.substring（0，startIndex）}
{关键字}
{name.substring（endIndex，name.length）}
;
返回res；
}

您可以在这里找到答案。您是否可以提供更改文本颜色的代码，以便轻松解决问题？我不想更改整个contentEditable div元素的颜色，只想更改其中的特定单词。这就是为什么我要将单词包装起来，但遗憾的是，span元素没有得到正确的渲染。