在反应渲染方法中嵌入 link

Question

我对 React JS 还很陌生。我在 React 渲染方法中。我想在 if 语句 {menu.Title == "Club Finder" 中嵌入 link ？ "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

您是说您得到的是 RAW HTML 输出渲染？

尝试：

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

Answer 2

从 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" />

在反应渲染方法中嵌入 link

Embedding a link in react render method

conditional

render

reactjs