如何使用 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}