如何渲染包含html標(biāo)簽元素的字符串

最近有個(gè)搜索替換的需求，用戶(hù)可以輸入關(guān)鍵字信息來(lái)匹配出對(duì)應(yīng)的數(shù)據(jù)，然后對(duì)其關(guān)鍵字進(jìn)行標(biāo)記顯示，如下圖所示：

實(shí)現(xiàn)上面的需求的思路就是前端去判斷檢索內(nèi)容，將內(nèi)容中對(duì)應(yīng)的關(guān)鍵字設(shè)置一個(gè)背景顏色的樣式,代碼如下：

    if (content?.includes(serachV)) {
      content = content.replaceAll(serachV, `<span style="background-color: gold;">${serachV}</span>`);
      return content
    }

但這樣設(shè)置后并未達(dá)到我想要的效果，前端展示上并沒(méi)有變黃，沒(méi)有生效。

后面查閱資料發(fā)現(xiàn)，在react中，出于安全考慮的原因（XSS 攻擊），在 React.js 當(dāng)中所有的表達(dá)式插入的內(nèi)容都會(huì)被自動(dòng)轉(zhuǎn)義，就相當(dāng)于 jQuery 里面的 text(…) 函數(shù)一樣，任何的 HTML 格式都會(huì)被轉(zhuǎn)義掉。

所以通過(guò)富文本編輯器進(jìn)行操作后的內(nèi)容，會(huì)保留原有的標(biāo)簽樣式，并不能正確展示，如下圖紅框所示：

因此我們可以使用dangerouslySetInnerHTML這個(gè)api將其設(shè)置為內(nèi)部的HTML，以此達(dá)到上述的效果，代碼如下：

    if (content?.includes(serachV)) {
      content = content.replaceAll(serachV, `<span style="background-color: gold;">${serachV}</span>`);
      return <span dangerouslySetInnerHTML={{ __html: content }} />;
    }

完整代碼如下：

export const quickReplaceColumns = (serachV: string) => {
  const renderNode = (content: string) => {
    if (content?.includes(serachV)) {
      content = content.replaceAll(serachV, `<span style="background-color: gold;">${serachV}</span>`);
      return <span dangerouslySetInnerHTML={{ __html: content }} />;
    }
    return content || '--';
  };
  return [
    {
      title: '用例名稱(chēng)',
      dataIndex: 'name',
      width: '30%',
      render: (name: string) => renderNode(name),
    },
    {
      title: '用例內(nèi)容',
      dataIndex: 'content',
      width: '50%',
      render: (content: string) => renderNode(content),
    },
    {
      title: '所屬模塊',
      dataIndex: 'module_name',
      width: '10%',
    },
  ];
};

實(shí)現(xiàn)效果如下：

dangerouslySetInnerHTML是什么

dangerouslySetInnerHTMl 是React標(biāo)簽的一個(gè)屬性，dangerouslySetInnerHTML翻譯過(guò)來(lái)就是：危險(xiǎn)的設(shè)置內(nèi)部HTML。

為什么說(shuō)是危險(xiǎn)的呢？因?yàn)橛脩?hù)的輸入是不可控的，如果是這樣的操作是開(kāi)發(fā)給用戶(hù)輸入可能會(huì)導(dǎo)致 cross-site scripting (XSS) 攻擊或者其他網(wǎng)頁(yè)攻擊，還有一些意向不到的錯(cuò)誤出現(xiàn)。

但我們這里的使用情況是控制了輸入的，并沒(méi)有開(kāi)放給用戶(hù)輸入，所以不會(huì)出現(xiàn)上面的情況，可以放心使用。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-437269.html

使用注意事項(xiàng)

1. dangerouslySetInnerHTML的語(yǔ)法：第一層{ }代表JSX語(yǔ)法，第二層{ }是一個(gè)__html:string的鍵值對(duì)。
2. 最初未用反引號(hào)包裹<img className="detail_img" src=${v[0]} />結(jié)果渲染的全是[object Object]，想了半天才反應(yīng)過(guò)來(lái)__html:string
3. 用反引號(hào)包裹的html代碼不再是JSX語(yǔ)法，所以clasName要改為class；

到了這里，關(guān)于react如何渲染包含html標(biāo)簽元素的字符串的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！