元素在頁面上顯示爲<span class =「icon」>＆＃xe80d;</span>而不是正在呈現

Question

我有以下ReactJS組分：

class Menu1item extends React.Component{ 
    render(){ 
     return (
      <div> 
       {this.props.glyph}{this.props.value} 
      </div> 
     ) 
    } 
} 

的組件被用於象下面這樣：

<Menu1item glyph={menu.glyph1} value={menu.menu1}/> 

而且menu是象下面這樣：

menu={menu1: 'YOU', glyph1: '<span class="icon">&#xe80d;</span>'} 

組件呈現如下：

我在想我怎麼能實際渲染span元素。

---

應用建議的解決方案，現在，它工作得很好：

Answer 1

嘗試圍繞'<span class="icon">&#xe80d;</span>'去掉引號。

這應做到：

const menu = { 
    menu1: 'YOU', 
    glyph1: (<span class="icon">&#xe80d;</span>) 
}; 

說明：

你傳遞一個字符串文字字模道具，所以它的字面渲染串'<span class="icon">&#xe80d;</span>'，符合市場預期。如果你傳遞一個<span>代替，那麼就應該像你希望它渲染<span>。

記住，你正在使用JSX，所以你可以寫HTML風格的標籤時沒有引號，他們將被編譯爲React.createElement()電話。

編輯：

class由於是一個保留字，陣營使用className支柱代替。所以你實際上應該寫

const menu = { 
    menu1: 'YOU', 
    glyph1: (<span className="icon">&#xe80d;</span>) 
}; 

感謝@novaline來捕捉這個。

Answer 2

您需要dangerouslySetInnerHTML：

render() { 

    return (
     <div> 
      <span dangerouslySetInnerHTML={{__html: this.props.glyph}}></span> 
      {this.props.value} 
     </div> 
    ) 
}