Question

我对React JS很新。我在React渲染方法中。我想在if语句中嵌入一个链接{menu.Title ==＆＃34; Club Finder＆＃34; ？＆＃34; Club Finder＆＃34; ：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

从appendChild(删除双引号。

其JSX。您不需要在html周围添加双引号Club Finder hyperlink。

""

在反应渲染方法中嵌入链接

2 个答案: