珠寶網(wǎng)站建設(shè)平臺分析報告網(wǎng)站構(gòu)建的基本流程
1.js正則replaceAll+dangerouslySetInnerHTML={{ __html: xxx }}危險屬性
步驟最簡單,但是是危險屬性,不推薦使用,項目中實在沒有頭緒,可以使用它應(yīng)急
通過useMemo計算得到新的狀態(tài)值,賦值給dangerouslySetInnerHTML屬性的__html
關(guān)鍵代碼:
const [state1, setState1] = useState('我愛中國,中國愛我')const updateState1 = useMemo(() => {return state1.replaceAll('中國', '<span style="color:red;">中國</span>')}, [state1])<div dangerouslySetInnerHTML={{ __html: updateState1 }}></div>
2.useMemo計算遍歷后將關(guān)鍵字替換為React標簽寫法(內(nèi)容為關(guān)鍵字),使用_.map渲染
(要不是replace不能轉(zhuǎn)換為React標簽,只支持字符串也不用這么麻煩)
關(guān)鍵代碼:
const updateState2 = useMemo(() => {return highlightPassword(state2, '_.map_')}, [state2])function highlightPassword(str0: any, key_prefix?: string) {const password = '中國';const pattern = new RegExp(`\\B(?=((${password})+)+(?!(${password})))`, 'g')return str0.replace(pattern, '||||').split('||||').map((item, index) => {const idx = item.indexOf(password)return <span key={key_prefix + index}>{idx >= 0? <><span style={{ color: 'red' }}>{item.substring(0, password.length)}</span>{item.substring(password.length, item.length)}</>: item}</span>});}<p>map遍歷children元素:</p>{_.map(updateState2, (child) => {return child})}
3.遍歷后將關(guān)鍵字替換為React標簽寫法(內(nèi)容為關(guān)鍵字),使用ReactDOM.render方法插入到指定元素中
關(guān)鍵代碼:
const Test = () => {const [state2, setState2] = useState<any>('我愛中國,中國中國愛我')useEffect(() => {// 遍歷將關(guān)鍵字換成react寫法的標簽,使用ReactDOM.render方法渲染到頁面上const str = highlightPassword(state2, 'ReactDOM.render_')ReactDOM.render(<div>{str}</div>, document.getElementsByClassName('my-highlight-test')[0])}, [state2])function highlightPassword(str0: any, key_prefix?: string) {const password = '中國';const pattern = new RegExp(`\\B(?=((${password})+)+(?!(${password})))`, 'g')return str0.replace(pattern, '||||').split('||||').map((item, index) => {const idx = item.indexOf(password)return <span key={key_prefix + index}>{idx >= 0? <><span style={{ color: 'red' }}>{item.substring(0, password.length)}</span>{item.substring(password.length, item.length)}</>: item}</span>});}<p>ReactDOM.render方法:</p><div className="my-highlight-test"></div>
完整代碼示例:?
import React, { useEffect, useMemo, useState } from 'react'
import ReactDOM from 'react-dom';
import _ from 'lodash';const Test = () => {const [password,] = useState('中國')const [state1, setState1] = useState('我愛中國,中國愛我')const [state2, setState2] = useState<any>('我愛中國,中國中國愛我')useEffect(() => {// 遍歷將關(guān)鍵字換成react寫法的標簽,使用ReactDOM.render方法渲染到頁面上const str = highlightPassword(state2, 'ReactDOM.render_')ReactDOM.render(<div>{str}</div>, document.getElementsByClassName('my-highlight-test')[0])}, [state2])const updateState1 = useMemo(() => {return state1.replaceAll(password, str => `<span style="color:red;">${str}</span>`)}, [state1])const updateState2 = useMemo(() => {return highlightPassword(state2, '_.map_')}, [state2])useEffect(() => {setTimeout(() => {setState1('哈哈哈,中國萬歲,萬歲萬萬歲,中國加油!')setState2('哈哈哈,中國中國萬歲,萬歲萬萬歲,中國中國加油!愛你中國!')}, 2000)}, [])function highlightPassword(str0: any, key_prefix?: string) {const pattern = new RegExp(`\\B(?=((${password})+)+(?!(${password})))`, 'g')return str0.replace(pattern, '||||').split('||||').map((item, index) => {const idx = item.indexOf(password)return <span key={key_prefix + index}>{idx >= 0? <><span style={{ color: 'red' }}>{item.substring(0, password.length)}</span>{item.substring(password.length, item.length)}</>: item}</span>});}return (<div><p>dangerouslySetInnerHTML方式:</p><div dangerouslySetInnerHTML={{ __html: updateState1 }}></div><p>map遍歷children元素:</p>{_.map(updateState2, (child) => {return child})}<p>ReactDOM.render方法:</p><div className="my-highlight-test"></div></div>)
}export default Test
顯示效果:
初始化頁面時:
2s后(模擬異步請求數(shù)據(jù))顯示: