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

相关推荐
小茴香3534 小时前
Vue 脚手架(Vue CLI)
前端·javascript·vue.js
午安~婉4 小时前
ESLint
前端·eslint·检查
“抚琴”的人4 小时前
C#中获取程序执行时间
服务器·前端·c#
掘金一周4 小时前
Flex 布局下文字省略不生效?原因其实很简单| 掘金一周 10.16
前端
Stringzhua4 小时前
Vue的Axios介绍【9】
前端·javascript·vue.js
摸着石头过河的石头5 小时前
JavaScript 垃圾收集:内存管理的艺术
前端·javascript
前端小崽子5 小时前
🔥 踩坑实录:Fabric 在 Intel Iris Xe 显卡上 CPU 飙升 100%
前端
东华帝君5 小时前
React Suspense组件
前端
siaikin5 小时前
基于 Astro Starlight 的多框架文档
前端·vue.js·markdown
红毛丹5 小时前
在 Playwright 中执行 JavaScript
前端·自动化运维