react解析html字符串的方法

白鲸ld2023-11-03 16:14

写项目的时候会存在一些详情页，后端返回的会带一些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为通过接口获取到的内容，可以根据自己获取到的内容放里边，我这样是可以的，大家可以参考一下，可能有时候部分需要变动一下。