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。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章