react解析html字符串的方法

写项目的时候会存在一些详情页,后端返回的会带一些p之类的标签,需要我们前端来解析,刚开始搜的话有说让用dangerouslySetInnerHTML属性来改的,他的案例是这样:

javascript 复制代码
function MyComponent() {
  const htmlString = "<p>Hello, world!</p>";
  return <div dangerouslySetInnerHTML={{ __html: htmlString }} />;
}

他这是直接把内容放到htmlString里边了,但是咱们交互的肯定不是这,加入是res.data,,我按照他这样去写,如下:

javascript 复制代码
function MyComponent() {
  return <div dangerouslySetInnerHTML={{ __html: res.data }} />;
}

还是不能够解析标签,还是标签会显示出来,所以最后用的react-html-parser,而且dangerouslySetInnerHTML有风险。
react-html-parser安装

javascript 复制代码
yarn  add react-html-parser
或者
npm install react-html-parser

引入

javascript 复制代码
import ReactHtmlParser from 'react-html-parser';

使用

javascript 复制代码
const parseHtmlContent = (htmlContent:string) => {
	const parseContent = ReactHtmlParser(htmlContent,{
	  transform:(node:any) => {
	       if(node.type == 'text'){
	          const parseText = ReactHtmlParser(node.data)
	          return parseText;
	       }  
	  }
	})
	     return parseContent;
}
html 复制代码
<div class="content">
      {parseHtmlContent(context.text)}
 </div>

context.text为通过接口获取到的内容,可以根据自己获取到的内容放里边,我这样是可以的,大家可以参考一下,可能有时候部分需要变动一下。

相关推荐
卿·静6 分钟前
Node.js对接即梦AI实现“千军万马”视频
前端·javascript·人工智能·后端·node.js
Mintopia20 分钟前
🚀 Next.js 全栈 Web Vitals 监测与 Lighthouse 分析
前端·javascript·全栈
Mintopia22 分钟前
🤖 AIGC + CMS:内容管理系统智能化的核心技术支撑
前端·javascript·aigc
HelloGitHub25 分钟前
这款开源调研系统越来越“懂事”了
前端·开源·github
whysqwhw28 分钟前
hippy的主要原理
前端
子兮曰31 分钟前
🚀95%的前端开发者都踩过坑:JavaScript循环全解析,从基础到高阶异步迭代
前端·javascript·性能优化
2401_8534068831 分钟前
Tdesign-React 组件 Card 实现头部固定,内容区单独可滚动
前端·react.js·tdesign
蓝倾97634 分钟前
小红书获取用户作品列表API接口操作指南
java·服务器·前端·python·电商开放平台·开放api接口
小桥风满袖34 分钟前
极简三分钟ES6 - 数值的扩展
前端·javascript
北辰alk35 分钟前
React 组件间数据共享全方位指南:从 Props 到状态管理
前端