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为通过接口获取到的内容,可以根据自己获取到的内容放里边,我这样是可以的,大家可以参考一下,可能有时候部分需要变动一下。

相关推荐
abigale031 小时前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
专注API从业者1 小时前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile1 小时前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome
weixin_416639971 小时前
爬虫工程师Chrome开发者工具简单介绍
前端·chrome·爬虫
我是如子啊1 小时前
【解决“此扩展可能损坏”】Edge浏览器(chrome系列通杀))扩展损坏?一招保留数据快速修复
前端·chrome·edge
灵性花火1 小时前
Qt的前端和后端过于耦合(0/7)
开发语言·前端·qt
孤水寒月5 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀5 小时前
html初学者第一天
前端·html
耶啵奶膘8 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
视频砖家8 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能