元素在页面上显示为而不是呈现

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是一个保留字，React使用className prop。所以你应该写

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