React.js：contentEditable div 不呈现嵌套跨度元素答案

【问题标题】：React.js: contentEditable div not rendering nested span elementsReact.js：contentEditable div 不呈现嵌套跨度元素
【发布时间】：2020-10-03 01:59:57
【问题描述】：

我有一个 contentEditable div，我试图在其中更新用户在 onChange 中键入的单词的颜色。当我检测到我想要着色的单词时，我将它包装在 <span> 元素中。

问题是，<span> 元素没有被正确渲染，span 元素的原始 HTML 显示如下：

bla bla bla <span class="text-primary">keyword with color</span> 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;
}

这是 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>

【问题讨论】：

你可以在这里找到答案stackoverflow.com/questions/16625618/…
您能否提供您运行的代码来更改文本颜色，以便轻松解决您的问题？
我不想改变整个 contentEditable div 元素的颜色，只是其中的特定单词。这就是我在中包装这些单词的原因，但可惜 span 元素没有正确呈现。

标签： javascript html reactjs

【解决方案1】：

在 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;
}

【讨论】：