最近有個需求，在乙個react專案中，實現搜尋關鍵字呈現高亮狀態。這個在普通的html檔案中還好操作些，在react專案中有點懵逼了，因為react專案中很少操作dom，有點無從下手。但最後還是實現了效果，如下：
首先來看看如何在react中操作dom,廣大網友給出兩種方案：
一：使用選擇器：
1、引入react-dom
import reactdom from 'react-dom'
2、給react節點設定id或類名等標識
'tip'>span>
3、定義變數儲存dom元素
var span = document.getelementbyid('tip')
4、通過reactdom的finddomnode()方法修改dom的屬性
reactdom.finddomnode(span).style.color = 'red'
1、給指定標籤設定ref屬性
ref='tip'>
2、通過this.refs.ref屬性值來修改標籤的屬性
this.refs.tip.style.color = "red"
import react from 'react';import from 'antd';
const = input;
// 高亮測試
class highlight extends react.component ;
} findhighlight = (keyword)=>;
searchdo=(content,keyword)=>`,"gmi");
// eslint-disable-next-line no-param-reassign
content = content.replace(re,``);
}return content;
};render() = this.state;
return (
this.findhighlight(value)}
style=}
/>
);}}
export default highlight;關鍵字搜尋
關鍵字搜尋 function sercah waitmsg 已找到對應的 g keys count 處關鍵字！1 相同關鍵字查詢時返回 reading children reading box m p css span keys removeattr style removeattr id g ke...
elementUI實現關鍵字搜尋 只是搜尋
有過迷茫的階段獨自走在回家的街上，當我發現路還離我很遠現在依然是像當初那麼渴望 elementui實現關鍵字搜尋 運用的elementui選擇器中的遠端搜尋功能 還沒有封裝，接下來會封裝，封裝一點點學，不著急 結構 data 登記門店 prop name class el btn from sele...
ntext搜尋關鍵字
選擇自 zjcxc 的 blog ntext搜尋 按 tb 表中的 keyword 在 ta 中查詢 content 列出每個 keyword 在 content 中的具體位置 鄒建 2004.07 測試資料 create table ta id int identity 1,1 content n...