突出显示关键字数组的 React JSX 元素

Question

我是 React 的新手，我正在尝试根据数组中的关键字突出显示 JSX 表达式中的文本。

return <RightWrapper>
{value.sort((a, b) => a - b.id).map(transcript => <p key={transcript.id}>{transcript.createdAt+"  "+ transcript.Transcription +" "} </p> )}
</RightWrapper>

searchWords={["tech", "deck", "financial"]}

Answer 1

您可以创建一组搜索词，检查该文本是否在一个集合中可用，您也可以使用数组，但它比集合慢。

const set = new Set(["tech", "deck", "financial"]);
const arr =  value.sort((a, b) => a.id - b.id)

return ( 
  <RightWrapper>
  {
    arr.map(transcript => (
      <p 
        key={transcript.id}
        style={{
          color: set.has(transcript.id) ? 'red' : 'black'
        }}
        >{transcript.createdAt + "  " + transcript.Transcription + " "} </p>
    ))
  }
  </RightWrapper>
)

这应该可以解决您的问题，

const set = new Set(["tech", "deck", "financial"]);
const arr = value.sort((a, b) => a.id - b.id);

function createMarkup(transcript) {
  const words = ["tech", "deck", "financial"];
  let str = `${transcript.createdAt} ${transcript}`;
  words.forEach((word) => {
    if (str.includes(word)) {
      str = str.replaceAll(word, `<span class="highlight">${word}</span>`);
    }
  });

  return { __html: str };
}

return (
  <RightWrapper>
    {arr.map((transcript) => (
      <p
        dangerouslySetInnerHTML={createMarkup(transcript.Transcription)}
        key={transcript.id}
      ></p>
    ))}
  </RightWrapper>
);

突出显示关键字数组的 React JSX 元素

Highlight React JSX element for array of keywords

javascript

jsx

reactjs

aws-amplify