元素在页面上显示为<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> 
    ) 
}