我搜索过“红色”这个词,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
冲突的情况下获得所需的结果?
答案 0 :(得分: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
而有点失真。