元素在页面上显示为<span class =“icon”></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是保留字，因此React使用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>
  )
}