上一篇是透過操作react專案的dom形式改變元素標籤的顏色。今天我們不操作dom，透過改變state引數動態渲染頁面。

很多人會有個疑問，react專案的state裡面可以存html標籤嗎？

可以的。那麼我們來看看如何操作：

首先在state裡存上資料 text:'<p>這是一段文字，可以實現搜尋匹配高亮的效果</p>'

然後在渲染函式的元素裡使用，主要是使用了dangerouslySetInnerHTML屬性：不明白的可以看完整程式碼。

實現效果是，搜尋時匹配到的高亮，首個高亮顏色加重，再查詢清除上回的高亮效果，輸入空值，文字恢復無高亮狀態。(這些也是比上篇文章最佳化的地方)

需要注意的地方：首個高亮顏色加重，清空上次加重顏色。

我們知道當用replace,加全域性替換就替換所有的，不加全域性，就替換首個，所以我們先把全域性匹配到的換色，然後用替換首個的顏色。

為了清空上次的顏色，我在state中加了oldtext，和text。oldtext用來儲存初始化狀態，text用來修改 用。

好了，看一下完整的程式碼：

import React from 'react';import { Input } from 'antd';const { Search } = Input;class Highlight extends React.Component {  constructor(props) {    super(props);    this.state = {      oldtext:`<p>writing to a TLS enabled socket, node::StreamBase::Write calls node::TLSWrap::DoWrite with a freshly allocated WriteWrap object as first argument. If the DoWrite method does not return an error, this object is passed back to the caller as part of a StreamWriteResult structure. This may be exploited to corrupt memory leading to a Denial of Service or potentially other exploits\n" +        "CVE-2020-8287: HTTP Request Smuggling in nodejs Affected versions of Node.js allow two copies of a header field in a http request. For example, two Transfer-Encoding header fields. In this case Node.js identifies the first header field and ignores the second. This can lead to HTTP Request Smuggling (https://cwe.mitre.org/data/definitions/444.html).\n" +        "CVE-2020-1971: 內容 OpenSSL 內容- EDIPARTYNAME NULL pointer de-reference (High) This is a vulnerability in OpenSSL which may be exploited through Node.js. You can read more about it in https://www.openssl.org/news/secadv/20201208.txt</p>`,      text:`<p>writing to a TLS enabled socket, node::StreamBase::Write calls node::TLSWrap::DoWrite with a freshly allocated WriteWrap object as first argument. If the DoWrite method does not return an error, this object is passed back to the caller as part of a StreamWriteResult structure. This may be exploited to corrupt memory leading to a Denial of Service or potentially other exploits\n" +        "CVE-2020-8287: HTTP Request Smuggling in nodejs Affected versions of Node.js allow two copies of a header field in a http request. For example, two Transfer-Encoding header fields. In this case Node.js identifies the first header field and ignores the second. This can lead to HTTP Request Smuggling (https://cwe.mitre.org/data/definitions/444.html).\n" +        "CVE-2020-1971: 內容 OpenSSL 內容- EDIPARTYNAME NULL pointer de-reference (High) This is a vulnerability in OpenSSL which may be exploited through Node.js. You can read more about it in https://www.openssl.org/news/secadv/20201208.txt</p>`    };  }//  用oldtext儲存最初狀態，方便復原時使用  findHighlight = (str)=>{    const {oldtext}=this.state;    if(str===""){      this.setState({text:oldtext})  // 文字復原    }else{      const keyWord=str.replace(/^(\s|\xA0)+|(\s|\xA0)+$/g, '');      if(oldtext.indexOf(keyWord) !== -1){        let newVal = oldtext.replace(new RegExp(keyWord,"g"), `<span style="background-color:#FFFF00">${keyWord}</span>`);        newVal = newVal.replace(keyWord, `<span style="background-color:#FF9632">${keyWord}</span>`);        this.setState({text:newVal})      }    }    return str  };  render() {    const {text} = this.state;    return (      <div>        <Search          placeholder="請輸入查詢內容"          onSearch={value => this.findHighlight(value)}          style={{ width: 200 }}        />        <br />        <br />        <div          style={{            border:"1px solid #ccc",            borderRadius:"4px",            padding:"5px"          }}          dangerouslySetInnerHTML={{            __html:text          }}        />      </div>    );  }}export default Highlight;

在下一版中將新增高亮能夠上下移動的操作。歡迎收藏!