dangerouslySetInnerHTMl 屬性

很多時(shí)候我們做一個(gè)項(xiàng)目接口會(huì)返回一段 HTML 字符串文本，然后我們把它解析渲染成正常的html，這是在項(xiàng)目中常見(jiàn)不能再常見(jiàn)的情況了，可是在 react 里邊就有一個(gè)小小的插曲，在這里分享給同學(xué)們；

由于react 項(xiàng)目中是 JSX 語(yǔ)法，JSX 防注入攻擊使得大括號(hào)里的html代碼全部變成字符串進(jìn)行渲染，本人就遇到了這樣的問(wèn)題，（還是渲染這段代碼字符串文本，并沒(méi)有解析）

解決：

<div dangerouslySetInnerHTML = {{__html:返回的html代碼片段}} ></div>

原理：

1.dangerouslySetInnerHTMl 是React標(biāo)簽的一個(gè)屬性，類(lèi)似于angular的ng-bind；

2.有2個(gè){{}}，第一{}代表jsx語(yǔ)法開(kāi)始，第二個(gè)是代表dangerouslySetInnerHTML接收的是一個(gè)對(duì)象鍵值對(duì);

3.既可以插入DOM，又可以插入字符串；