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>