Question

我搜索过“红色”这个词，API 返回这个数组

const resultArray = [{ type: "item", result: "red" },
 { type: "item", result: "redburn" },
 { type: "item", result: "red flame" },
 { type: "item", result: "red flame roses" },
 { type: "item", result: "imredde or not" },
];

我可以映射它并显示结果...

{resultArray.map((item: any, index: number) => {
   return (
      <div key={`item-search-result-${index}`}>{item.result}</div>
   );
})}

如何将“红色”这个词加粗，HTML 会像......

<b>red<b/>
<b>red<b/>burn
<b>red<b/> flame
<b>red<b/> flame roses
im<b>red<b/>de or not

我试过了

{item.result.replace(/red/g, "<b>red<b/>")}

但实际的标签不会被渲染，但它们会显示在屏幕上的正确位置。

JSX 中是否有一种方法可以在不与旧的 render unsafe HTML 冲突的情况下获得所需的结果？

Answer 1

由于您的 red 关键字出现在每个迭代字符串的开头，您可以使用 slice，如下所示：

{resultArray.map((item: any, index: number) => {
   const str = item.result.slice(3);
   return (
      <div key={`item-search-result-${index}`}><b>red</b>{str}</div>
   );
})}

使用 split 可以这样执行

{
  resultArray.map((item: any, index: number) => {
    const strArr = item.result.split("red");

    return ( <div key={`item-search-result-${index}`}>{
        strArr.map((str, key) => {
          if (key === 0 && str === "") {
            return <b>red</b>;
          } else {
            if (key + 1 === strArr.length) {
              return <span>{str}</span>;
            } else {
              return <span>{str}<b>red</b></span>;
            }
          }
        })
      }</div>
    );
  })
}

不要介意代码是否因为使用了 tidy 而有点失真。

JSX：如何使可以在字符串中找到的单词加粗

1 个答案: