Javascript 使用 Reactjs 根据搜索结果突出显示markdown 内容中的单词

我正在构建使用markdown 内容的Reaction/Django应用程序，我想放一个搜索栏，用户可以在上面搜索博客内容，并突出显示与搜索结果匹配的单词.

我使用了Reaction-Highlight-Words库，但我发现它与标记内容不兼容，所以我try 使用Reaction-Strong-Replace库，但我在测试中遇到了一个问题

REACT-STRING-REPLACE返回数组而不是字符串，所以我try 使用一个钩子(UseState)，它是一个空字符串，映射数组中的每个单词并将其附加到钩子中，然后将钩子放入ReactMarkdown元素中.

import React from 'react'
import ReactMarkdown from 'react-markdown'
import reactStringReplace from 'react-string-replace';
export default function Mark(){
   
   
    const [stringData, setStringData] = React.useState("");
    
    const content = 'Hey my number is 555-555-5555.';
   const replacearray= reactStringReplace(content, 's', (match, i) => (
        `===${match}===`
      ));
console.log(replacearray)
replacearray.map(word =>{
    console.log(word)
    setStringData(stringData + `${word}`)


})
console.log(stringData)
    return(
       <ReactMarkdown>{stringData}</ReactMarkdown>
    )
}

console.log(replacearray)的结果是:

  Array(3) [ "Hey my number i", "===s===", " 555-555-5555." ]

console.log(word)的结果是:

Hey my number i        mark.js:116:13
===s===                mark.js:116:13
 555-555-5555          mark.js:116:13

console.log(stringData)的结果是:

 555-555-5555. 555-555-5555. 555-555-5555. 555-555-5555. 555-555-5555. 555-555-5555. 555-555-5555. 555-555-5555. 555-555-5555. 555-555-5555. 555-555-5555. 555-555-5555. 555-555-5555. 555-555-5555. 555-555-5555. 555-555-5555. 555-555-5555. 555-555-5555. 555-555-5555. 555-555-5555. 555-555-5555. 555-555-5555. 555-555-5555. 555-555-5555. 555-555-5555.

那么，虽然每个单词的结果都是单词本身，但字符串数据的结果是这样的呢？