요소는 페이지에 <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>) 
}; 

감사합니다.

Answer 2

당신은 dangerouslySetInnerHTML 필요합니다 이렇게하면

render() { 

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