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>;
}

相關資料及官方文檔：

點我跳轉或者點我跳轉