如何突出显示部分文本React

Question

有搜索查询和结果标题。我想突出显示与搜索查询相对应的标题中的单词

  function lightString(string, query) {
      return string.split(" ").map(item => item.toUpperCase() === query.toUpperCase() ? `<span className='some-class'>${item}<span/>` : item).join(" ");
  }
  let result = lightString(product.title, searchWords[0])

  <div dangerouslySetInnerHTML={{__html: result}} />

但结果我有不想要的嵌套： enter image description here

也许你有任何想法如何实现它？ 提前谢谢

Answer 1

我认为你的lightString方法中有一个小错字。

你有     <span className='some-class'>${item}<span/>

相反尝试     <span class='some-class'>${item}</span>

注意结束/标记中<span />的位置。这是否解决了这个问题？

旁注：

className仅与JSX一起使用。在您的示例中，您正在注入innerHTML而不使用JSX。在这种情况下，请改用class。请注意，在您的图片中className而不是attribute使用了class。