要素は<span class = "icon">＆＃xe80d;としてページに表示されます。</span>なく

Question

私は以下ReactJSコンポーネントが持ってレンダリングされている：

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

成分は以下のように使用されている：

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

成分：

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

そしてmenuは以下のようです次のように表示されます。

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