如何使用 react-highlight-words 突出显示具有不同 colors 的多个关键字

Question

我正在我的 React 项目中开发搜索 function。 一开始我只需要输入一个关键字在文本中搜索，用这个关键字保存句子，分别显示结果句子。 我正在使用“react-highlight-words” https://github.com/bvaughn/react-highlight-words在所有搜索结果句子中突出显示这个关键字。

{searchResults.map((result, idx) => {
      
      return (
        <div key={`search-result-${idx}`}>
            <br />
            <Highlighter
              highlightClassName='YourHighlightClass'
              searchWords={[textForSearch]}
              autoEscape={true}
              textToHighlight={finalResults[idx]}
              key={idx}
            />
          </div>
        </div>
      );
    })}

上面textForSearch是关键字finalResults是搜索结果。 我使用关键字循环文本并将匹配的句子作为元素保存到数组中。

但是现在我需要在一次搜索中输入多个关键字，并显示一些包含这些关键字的句子或段落，并用不同的 colors 突出显示不同的关键字。

我怎样才能使用这个组件来做到这一点？ 如果有其他方法，请告诉我。 我见过许多与搜索和突出显示相关的主题和答案，但它们都以相同的颜色突出显示不同的单词。

Answer 1

const Highlight = ({ children, highlightIndex }) => ( <span className={ highlighted-text keyword-${highlightword.indexOf(children)} }>{children} );

并添加标签 - highlightTag={Highlight}