Question

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(

为什么？

Answer 1

此行错误

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

应该是

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

React - 意外的令牌，预期}

1 个答案: