react項目中搜索內容高亮效果和Ref的使用

  一、上週項目裏面有個需求，就是對搜索出來的內容有個顯示高亮的效果。剛開始說需求的時候認爲很難去實現，甚至想駁回這個功能。。。先上一張效果圖吧。

  以上是效果圖，類似我們在網頁中的全文搜索。

  說一下前端主要實現，這次的功能主要是後端返回一個標記好的HTML標籤結構，前端主要使用react的 dangerouslySetInnerHTML = {{ __html:要解析的內容}} 這個屬性來做的功能。

  拿上圖來舉例子，搜索的內容 keyWord = “計算機科學與技術”，後端搜索後返回的數據格式爲 “…< em > 計算機科學與技術< /em>…”（前後端約定好的標籤。。），這樣一來前端只需要解析，然後在前端給em標籤添加個CSS樣式就OK了。

   dangerouslySetInnerHTML = {{ __html:要解析的內容}} 既可以解析HTML標籤也能夠顯示正常的數據（dangerouslySetInnerHTML = {{ __html:“內容”}} ）。

   使用需要注意的地方：

1. 注意是雙大括號。第一 {} 代表jsx語法的開始，第二個 {} 是代表dangerouslySetInnerHTML需要接收的值
2. 傳值問題。接收值可以是對象也可以是字符串
3. 安全問題。在之前的js操作中我們使用innerHTML來改變DOM中數據的顯示，瞭解到，innerHTML使用不當會造成XSS漏洞的，所以這個屬性也是會造成XSS攻擊，因此我們應謹慎使用。

   二、Ref循環中使用

   項目中有個電話號碼數據脫敏的問題（電話號碼中間四位使用*代替），需要點擊的時候顯示全部。項目中使用了ant-design組件，所以只好使用Ref來改變當前點擊的值。

   循環中使用了下標（最好使用一個唯一不可變的值來區分Ref），
賦 值： ref ={ input => { this[phone${index}] = input }}
使用時：this[‘phone’ + index].innerHTML = data （改變真實的DOM內容）

   Ref的三種創建方式和調用方式：

1. 字符串方式：ref = “input” => this.refs.input
2. 回調函數方式：ref ={ input => { this.phone= input }} => this.phone
3. React.createRef(): ref = { this.phone } => this.phone.current（推薦方式）

   PS：不要在項目中過度使用ref，因爲它操作的是真實的DOM。