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} frameborder="0" style={{ width: "100%", height: "100%" }} frameBorder="0"></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()}`} 

style={{ width: "100%", height: "100%" }} frameBorder="0"></iframe>