react中實(shí)現(xiàn)搜索結(jié)果中關(guān)鍵詞高亮顯示

render() {
 const newsList=this.state.newsList;
 if(this.props.type==='tag'||this.props.type==='search'){
 let keyword=this.props.id; //這里是父組件傳過來的關(guān)鍵詞
 newsList.filter((value,index) => { //使用filter函數(shù)過濾新聞列表數(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} />) //把新聞傳遞給新聞列表的單個新聞組件
 })
 }
 <div className="btn-more transition" onClick={this.fetchMoreList}>{this.state.loadingText}</div>
 </div>
 );
 }

<div className="item-title" dangerouslySetInnerHTML = {{ __html:news.title }}></div>