宁波如何建网站,crm软件免费,WordPress博客整站带数据,wordpress文章格式1.js正则replaceAlldangerouslySetInnerHTML{{ __html: xxx }}危险属性
步骤最简单,但是是危险属性,不推荐使用,项目中实在没有头绪,可以使用它应急
通过useMemo计算得到新的状态值,赋值给dangerouslySetInnerHTML属性的__html
关键代码:
const [state1, setState1] useSt…1.js正则replaceAlldangerouslySetInnerHTML{{ __html: xxx }}危险属性
步骤最简单,但是是危险属性,不推荐使用,项目中实在没有头绪,可以使用它应急
通过useMemo计算得到新的状态值,赋值给dangerouslySetInnerHTML属性的__html
关键代码:
const [state1, setState1] useState(我爱中国,中国爱我)const updateState1 useMemo(() {return state1.replaceAll(中国, span stylecolor:red;中国/span)}, [state1])div dangerouslySetInnerHTML{{ __html: updateState1 }}/div
2.useMemo计算遍历后将关键字替换为React标签写法(内容为关键字),使用_.map渲染
(要不是replace不能转换为React标签,只支持字符串也不用这么麻烦)
关键代码:
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});}pmap遍历children元素:/p{_.map(updateState2, (child) {return child})}
3.遍历后将关键字替换为React标签写法(内容为关键字),使用ReactDOM.render方法插入到指定元素中
关键代码:
const Test () {const [state2, setState2] useStateany(我爱中国,中国中国爱我)useEffect(() {// 遍历将关键字换成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});}pReactDOM.render方法:/pdiv classNamemy-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] useStateany(我爱中国,中国中国爱我)useEffect(() {// 遍历将关键字换成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 stylecolor: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 (divpdangerouslySetInnerHTML方式:/pdiv dangerouslySetInnerHTML{{ __html: updateState1 }}/divpmap遍历children元素:/p{_.map(updateState2, (child) {return child})}pReactDOM.render方法:/pdiv classNamemy-highlight-test/div/div)
}export default Test
显示效果
初始化页面时 2s后模拟异步请求数据显示
