react 前端渲染 后端返回的html文本方式

需求：后端返回 html，里面有js操作，外链，前端需进行代码展示及可执行里面的js操作

一：只有纯html文本

1. 前端直接 用 “dangerouslySetInnerHTML”进行操作

eg：

　　　　 <div>

<p dangerouslySetInnerHTML={{_html: \'返回的数据\'}}></p>

　</div>

2.通过 iframe引用，先转成blob格式(注意格式)，在变成地址

eg：

　　let url = URL.createObjectURL(new Blob([‘返回的数据’], { type: \'text/html\' }))

　　<iframe src={url} frame 100%", height: "100%" }} frame></iframe>

二：后端返回 html，里面有js操作

1.inner只能解析纯文本，手动append代码进去；

2. 1方法若无效果，用eval执行js代码

let div = document.createElement("div")

div.innerHTML = ‘返回的数据’

this.pRef.append(div)

// eval解析

　　let scripts = div.querySelectorAll("script")

scripts.forEach(item => {

window.eval(item.innerText)

　　}

render() {

return (

<div>

<p ref={ref => this.pRef = ref}></p>

</div>

);

}

三：后端返回 html，里面有js操作，外链

前后端配合，接口改为 get 请求，前端通过ifram 进行展示；或者 要求后端返回一个地址，直接访问

<iframe src={`${API_CONFIG.PERSON_DEATIL}?qid=${qid}&${new Date().getTime()}`}

100%", height: "100%" }} frame></iframe>