如何使用react-highlight-words以不同的颜色突出显示多个关键字

Question

我正在开发一个搜索功能在我的React项目。一开始，我只需要输入一个关键字，在文本中搜索，保存带有该关键字的句子，并将结果句子分开显示。我用"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为搜索结果。我使用一个关键字来遍历文本，并将匹配的句子作为元素保存到数组中。

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

我如何使用这个组件来实现它?如果有别的办法请告诉我。我看到过很多与搜索和高亮相关的话题和答案，但它们都是用相同的颜色高亮不同的单词。

Answer 1

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

并添加标签- highlightTag={Highlight}