react中實(shí)現(xiàn)搜索結(jié)果中關(guān)鍵詞高亮顯示
網(wǎng)上看到很多js實(shí)現(xiàn)的關(guān)鍵詞高亮顯示，方法都是一個(gè)道理，先獲取要替換的文字區(qū)域，然后在用正則匹配到關(guān)鍵詞，并進(jìn)行替換。
react中實(shí)現(xiàn)起來(lái)似乎更簡(jiǎn)單一些。
我這里的需求是通過(guò)搜索框搜索出新聞列表，在已經(jīng)獲取到新聞列表數(shù)據(jù)中使用filter函數(shù)，獲取到每一個(gè)新聞的title,并定義關(guān)鍵詞正則，返回替換后的樣式，react不能直接解析帶html標(biāo)簽的字符串,方法如下：
render() {
const newsList=this.state.newsList;
if(this.props.type==='tag'||this.props.type==='search'){
let keyword=this.props.id; //這里是父組件傳過(guò)來(lái)的關(guān)鍵詞
newsList.filter((value,index) => { //使用filter函數(shù)過(guò)濾新聞列表數(shù)據(jù)
var re =new RegExp(keyword,"g"); //定義正則
value.title=value.title.replace(re, `<span class="keyword">${keyword}</span>`); //進(jìn)行替換，并定義高亮的樣式
})
}
return (
<div>
{newsList.map((value,index) => {
return (<NewsListItem news={value} key={index} />) //把新聞傳遞給新聞列表的單個(gè)新聞組件
})
}
<div className="btn-more transition" onClick={this.fetchMoreList}>{this.state.loadingText}</div>
</div>
);
}
NewsListItem組件渲染title:
<div className="item-title" dangerouslySetInnerHTML = {{ __html:news.title }}></div>
總結(jié)
以上所述是小編給大家介紹的react中實(shí)現(xiàn)搜索結(jié)果中關(guān)鍵詞高亮顯示，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
詳解react中useCallback內(nèi)部是如何實(shí)現(xiàn)的
前幾天有人在問(wèn)在useCallback函數(shù)如果第二個(gè)參數(shù)為空數(shù)組, 為什么拿不到最新的state值，那么這一章就來(lái)分析一下useCallback內(nèi)部是如何實(shí)現(xiàn)的，感興趣的小伙伴跟著小編一起來(lái)學(xué)習(xí)吧2023-07-07
React?狀態(tài)管理工具優(yōu)劣勢(shì)示例分析
這篇文章主要為大家介紹了React?狀態(tài)管理工具優(yōu)劣勢(shì)示例分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
詳解react中的state的簡(jiǎn)寫(xiě)方式
React是一個(gè)狀態(tài)機(jī)主要體現(xiàn)在state上，通過(guò)與用戶交易實(shí)現(xiàn)不同的狀態(tài)，state是組件的私有屬性，是用來(lái)初始化的，本文重點(diǎn)給大家介紹react中的state的簡(jiǎn)寫(xiě)方式，感興趣的朋友一起看看吧2021-08-08
React如何使用axios請(qǐng)求數(shù)據(jù)并把數(shù)據(jù)渲染到組件
這篇文章主要介紹了React如何使用axios請(qǐng)求數(shù)據(jù)并把數(shù)據(jù)渲染到組件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
使用 React hooks 實(shí)現(xiàn)類(lèi)所有生命周期
react 自 16.8 開(kāi)始，引入了 Hooks 概念，使得函數(shù)組件中也可以擁有自己的狀態(tài)，并且可以模擬對(duì)應(yīng)的生命周期，這篇文章主要介紹了使用 React hooks 怎么實(shí)現(xiàn)類(lèi)里面的所有生命周期,需要的朋友可以參考下2023-02-02
react如何利用useRef、forwardRef、useImperativeHandle獲取并處理dom
這篇文章主要介紹了react如何利用useRef、forwardRef、useImperativeHandle獲取并處理dom,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-10-10
React實(shí)現(xiàn)圖片懶加載的常見(jiàn)方式
圖片懶加載是一種優(yōu)化網(wǎng)頁(yè)性能的技術(shù),它允許在用戶滾動(dòng)到圖片位置之前延遲加載圖片,通過(guò)懶加載,可以在用戶需要查看圖片時(shí)才加載圖片,避免了不必要的圖片加載,本文給大家介紹了React實(shí)現(xiàn)圖片懶加載的常見(jiàn)方式,需要的朋友可以參考下2024-01-01
React路由動(dòng)畫(huà)切換實(shí)現(xiàn)過(guò)程詳解
這篇文章主要介紹了react-router 路由切換動(dòng)畫(huà)的實(shí)現(xiàn)示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2022-12-12
react如何將字符串轉(zhuǎn)義成html語(yǔ)句
這篇文章主要介紹了react如何將字符串轉(zhuǎn)義成html語(yǔ)句問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
解決React報(bào)錯(cuò)Invalid hook call
這篇文章主要為大家介紹了React報(bào)錯(cuò)Invalid hook call解決方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12