react中如何渲染html代碼

開發中遇到一個問題，就是用戶輸入可多個空格後，在頁面上只會顯示爲一個空格，想到的解決辦法就是利用 去replace空格，讓其能夠正常渲染，以下：

var result=value.replace(/\s/g," ");

通過替換後發現頁面上並不能直接渲染 ，通過一番搜索發現react的 dangerouslySetInnerHTML ，能夠解析並渲染html代碼。

用法以下：

若是想讓div元素中的內容： '<h3>hello world</h3>'正常渲染

<div dangerouslySetInnerHTML={{__html: '<h3>hahhah</h3>'}}></div>

注意 dangerouslySetInnerHTML 中必須是一個對象，更直觀的例子以下：

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

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

相關資料及官方文檔：

點我跳轉或者點我跳轉