react中使用字符串中生成HTML

在react項目中，有的時候字符串中有HTML標簽，如果直接輸出字符串的話，那HTML標簽就會被當成一個字符串。這顯然不是我們想要的效果，所以我們需要用到 

dangerouslySetInnerHTML 這個屬性來將dom字符串渲染出來。

dangerouslySetInnerHTML

dangerouslySetInnerHTML 是 React 為瀏覽器 DOM 提供 innerHTML 的替換方案。通常來講，使用代碼直接設置 HTML 存在風險，因為很容易無意中使用戶暴露於跨站腳本（XSS）的攻擊。因此，你可以直接在 React 中設置 HTML，但當你想設置 dangerouslySetInnerHTML 時，需要向其傳遞包含 key 為 __html 的對象，以此來警示你。例如：

function createMarkup() {
  return {__html: 'First · Second'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

使用例子：

// js

 const Str = '需要鼠標<br/>需要特別檢查攝像頭<br/>需要電腦包<br/>測試機轉租賃，序列號:XKS2014'


 // 輸出

<span dangerouslySetInnerHTML={{__html: Str}}></span>


//結果

// 需要鼠標
// 需要特別檢查攝像頭
// 需要電腦包
// 測試機轉租賃，序列號:XKS2014