React - 意外的令牌，预期的 }答案

【问题标题】：React - Unexpected Token, expected }React - 意外的令牌，预期的 }
【发布时间】：2018-01-14 01:06:49
【问题描述】：

import React, { Component } from "react"
import { Navbar,NavItem,Nav,Button } from "react-bootstrap"

class NavbarMain extends Component {
    constructor(){
      this.state={isLoggedIn:false,logInName:null}
    }
    render(){
      let button = null;
      let label = null;
      if(this.state.isLoggedIn){
        button = (<NavItem><Button>Log Out</Button></NavItem>);
        label = (<NavItem>Logged in as: {this.state.logInName}<NavItem>);
      }else{
        button = (<NavItem><Button>Log In</Button></NavItem>);
        label = (<NavItem>Not logged in</NavItem>);
      }
      return(
        <Navbar>
          <Navbar.Brand>
          <p>Web app</p>
          </Navbar.Brand>
          <Nav pullRight>
            {Label}
            {Button}
          </Nav>
        </Navbar>
      )
    }
}

导出默认的 NavbarMain

我正在尝试使用 react 和 react-bootstrap 创建一个 Web 应用程序，并将此代码用于页面顶部显示的导航栏。我收到以下错误

Syntax error: C:/Users/Levi/Desktop/lootbox_simulator/lootbox-simulator/src/Components/NavbarMain.js: Unexpected token, expected } (15:63)

  13 |           label = (<NavItem>Logged in as: {this.state.logInName}<NavItem>);
  14 |         }else{
> 15 |           button = (<NavItem><Button>Log In</Button></NavItem>);
     |                                                                ^
  16 |           label = (<NavItem>Not logged in</NavItem>);
  17 |         }
  18 |         return(

为什么？

【问题讨论】：

标签： reactjs react-bootstrap

【解决方案1】：

这行错了

<NavItem>Logged in as: {this.state.logInName}<NavItem>

应该是

<NavItem>Logged in as: {this.state.logInName}</NavItem>

【讨论】：