无法在 React 中找出“意外的令牌”[关闭]答案

【问题标题】：Cannot figure out "Unexpected token" in React [closed]无法在 React 中找出“意外的令牌”[关闭]
【发布时间】：2020-04-10 09:46:41
【问题描述】：

我无法弄清楚第 42:18 行的错误是什么意思，请有人解释一下。

错误信息：

第 42:18 行：解析错误：意外令牌

render() {
    return (
        <div className="FlexContainer NavbarContainer">
            <ul className="NavBar">
                <div className="mobilecontainer LeftNav">
                    <h2 className="BrandName LeftNav mobileboxmenu inline">Kommonplaces</h2>
                    <div className="hamburger inline" onClick={this.showDropdownMenu}><img alt="menubtn" src={hamburger}></img></div>
                    { this.state.displayMenu ? (
                </div> This line is 42 

                <Dropdown/>

                <li className="RightNav"><Link to="/">Host Your Space</Link></li>
                <li className="RightNav"><Link to="/">About Us</Link></li>
                <li className="RightNav FarRight"><Link to="/">Contact Us</Link></li>

                <li className="RightNav"><Link to="/">Sign Up</Link></li>
                <li className="RightNav"><Link to="/">Login</Link></li>
            </ul>
                ):
            (
          null
            )
        }
       </div>

    );
  }
}

export default MobileDropdown;

【问题讨论】：

您的 HTML 无效。 <div> 不能是 <ul> 的子元素。只有<li> 可以。
@Quentin 如何将其修复为不是我的子元素？
可能通过将其移出<ul>

标签： javascript reactjs

【解决方案1】：

JSX 不是 HTML 的 strings 组合在一起并传递给浏览器的 HTML 解析器以转换为 DOM。它是在 JavaScript 中创建元素的语法。

你正试图用</div> 开始一个 JSX 块，这是一个 end 标记。您首先需要一个匹配的 start 标签。

【讨论】：

我的问题是我有一个匹配的起始标签
@bpdg — 不，你没有。 </div> 是 JSX 部分中的第一件事，它是三元运算符之后的第一个值

【解决方案2】：

你的代码应该是：

  render() {
    return (
      <div className="FlexContainer NavbarContainer">
        <ul className="NavBar">
          <div className="mobilecontainer LeftNav">
            <h2 className="BrandName LeftNav mobileboxmenu inline">
              Kommonplaces
            </h2>
            <div className="hamburger inline" onClick={this.showDropdownMenu}>
              <img alt="menubtn" src={hamburger} />
            </div>
            {this.state.displayMenu ? (
              <>
                <Dropdown />

                <li className="RightNav">
                  <Link to="/">Host Your Space</Link>
                </li>
                <li className="RightNav">
                  <Link to="/">About Us</Link>
                </li>
                <li className="RightNav FarRight">
                  <Link to="/">Contact Us</Link>
                </li>

                <li className="RightNav">
                  <Link to="/">Sign Up</Link>
                </li>
                <li className="RightNav">
                  <Link to="/">Login</Link>
                </li>
              </>
            ) : null}
          </div>
        </ul>
      </div>
    );
  }

【讨论】：