반응 렌더링 방법에 링크 삽입하기

Question

저는 React JS를 처음 접했습니다. 나는 React 렌더 메소드 안에있다. if 문 내부에 링크를 삽입하고 싶습니다. {menu.Title == "Club Finder"? "Club Finder": menu.Title}하지만 HTML을 렌더링하지는 않습니다. 대신 HTML이 탐색 메뉴에 표시됩니다. 나는 이것이 왜 있는지를 알 수 없다. 이것에 대한 어떤 통찰력도 좋을 것입니다. 내 코드는 다음과 같습니다.

render() { 
    if (!this.props.data.Items) { 
     return (
     <div className="alert alert-danger">Menu is empty</div> 
    ); 
    } 
    const menuItems = this.props.data.Items.map((menu, index) => (
     <Hammer 
     onTap={this.handleMenuTap} 
     onClick={this.handleMenuClick} 
     onClick={this.handleMenuEnter} 
     key={`menu-item-${menu.Title}`} 
     > 
     <li 
      id={`menu-item-${index}`} 
     > 
      {menu.Title == "Club Finder" ? "<a href='#'>Club Finder</a>" : menu.Title} <span className="fa fa-chevron-down" /> 
     </li> 
     </Hammer> 
    )); 
    return (
     <nav className="mega-main-menu"> 
     <div className="mega-main-menu__logo-container"> 
      <a className="mega-main-menu__logo" href="/"> 
      { 
       this.props.data.Image ? 
       (
        <img 
        src={this.props.data.Image.Src} 
        alt={this.props.data.Image.Alt} 
        width="264" 
        height="50" 
        /> 
       ) : '' 
      } 
      </a> 
     </div> 
     <div className="mega-main-menu__nav-search-container"> 
      <Search show={this.state.showSearch} /> 
      <div className="mega-main-menu__items-container" onMouseLeave={this.handleMenuLeave}> 
      <ul className="mega-main-menu__items list--nostyle" style={{ width: 'auto' }}> 
       {menuItems} 
       { 
       this.state.megaMenuContent !== null ? (<MegaMenuOverlay content={this.state.megaMenuContent} />) : '' 
       } 
      </ul> 
      </div> 
      <button 
      className="mega-main-menu__toggle-mobile btn btn-default" 
      onClick={this.showMobileMenu} 
      > 
      <i className="fa fa-bars text-primary" /> 
      </button> 
      <div className="mega-main-menu__actions"> 
      <a 
       href="/login" 
       className="btn bg-primary mega-main-menu__actions-login" 
       ref={(button) => { this.usmsButton = button; }} 
      > 
       MY USMS 
      </a> 
      <i 
       className="fa fa-search text-primary mega-main-menu__actions-search" 
       onClick={this.toggleSearch} 
      /> 
      </div> 
     </div> 
     <MobileMenu 
      content={this.props.data.Items} 
      handleCloseMenu={this.hideMobileMenu} 
      showMobileMenu={this.state.showMobileMenu} 
     /> 
     </nav> 
    ); 
    } 

Answer 1

는 Club Finder hyperlink에서 따옴표를 제거하십시오.

해당 JSX. 큰 따옴표를 넣지 않아도됩니다. ""은 html을 중심으로 작성됩니다.

{ 
menu.Title == "Club Finder" ? 
<a href='#'>Club Finder</a> : //remove double quote from here. 
menu.Title 
} 
<span className="fa fa-chevron-down" /> 

Answer 2

RAW HTML 출력이 렌더링된다는 의미입니까?

는

{ 
     menu.Title == "Club Finder" ? <a href='#'>Club Finder</a> : 
     menu.Title 
    } <span className="fa fa-chevron-down" />