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

Posted 2023-02-22

【中文标题】无法在 React 中找出“意外的令牌”[关闭]

【英文标题】：Cannot figure out "Unexpected token" in React [closed]

【发布时间】：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  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>

【参考方案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  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>
    );