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。