React 如何正常渲染一段HTML字符串

dangerouslySetInnerHTMl 屬性

不少時候咱們作一個項目接口會返回一段 HTML 字符串文本，而後咱們把它解析渲染成正常的html，這是在項目中常見不能再常見的狀況了，但是在 react 裏邊就有一個小小的插曲，在這裏分享給同窗們；

因爲react 項目中是 JSX 語法，JSX 防注入攻擊使得大括號裏的html代碼所有變成字符串進行渲染，本人就遇到了這樣的問題，（仍是渲染這段代碼字符串文本，並無解析）

解決： 

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

原理：

1.dangerouslySetInnerHTMl 是React標籤的一個屬性，相似於angular的ng-bind；

2.有2個{{}}，第一{}表明jsx語法開始，第二個是表明dangerouslySetInnerHTML接收的是一個對象鍵值對;

3.既能夠插入DOM，又能夠插入字符串；