如何在React JS中创建类似于Javascript的节点?

我的演示是 here .

  import React, { useState } from 'react';
  export default function Test(props) {
  const orgText="Sri Lankan Tamil activists in Britain paid tribute to the victims of the Sri Lankan civil war on Friday by placing the national flower of Tamil";
  const [textHTML,setTextHTML]=useState([orgText]);
  let handleChange = e => {
    
    let str=e.target.value.trim();
    let wholeWordRegExp = new RegExp('\\b' + str + '\\b')
    let pos=orgText.search(wholeWordRegExp)
    let temp=[];
    if (pos>-1){
      temp.push(orgText.substring(0,pos));
      temp.push(
        <mark
          key="gg"
          contentEditable={true}
          suppressContentEditableWarning={true}>
            {str}
        </mark>    
      )
      temp.push(orgText.substring(pos+str.length));
      setTextHTML(temp);
    }
  };
  return (
    <form>
      <p>
        {textHTML}
      </p>
      <input type="text" onChange={handleChange} />
    </form>
  );
}