javascript - 如果出错-ReactJS

我正在尝试这样做：

{this.state.logged ?
     <p class="nav navbar-text hidden-xs"><span class="glyphicon glyphicon-user"></span> Bienvenido, {this.state.nombre} ({this.state.dni})</p>
     <p class="nav navbar-text visible-xs-block"><span class="glyphicon glyphicon-user"></span> Bienvenido, {this.state.nombre}</p>
     <li class="salir"><a href="http://www.upct.es/"><span class="glyphicon glyphicon-off"></span> Salir</a></li>
     :
     <li class="entrar"><a href="http://www.upct.es/"><span class="glyphicon glyphicon-user"></span> Entrar</a></li>
}

我试过了

{
    if (this.state.logged) {
        <p class="nav navbar-text hidden-xs"><span class="glyphicon glyphicon-user"></span> Bienvenido, {this.state.nombre} ({this.state.dni})</p>
        <p class="nav navbar-text visible-xs-block"><span class="glyphicon glyphicon-user"></span> Bienvenido, {this.state.nombre}</p>
        <li class="salir"><a href="http://www.upct.es/"><span class="glyphicon glyphicon-off"></span> Salir</a></li>
    } else
        <li class="entrar"><a href="http://www.upct.es/"><span class="glyphicon glyphicon-user"></span> Entrar</a></li>
    }
}

但是我得到一个错误。它也不起作用。在“ true”和“ false”两种情况下，请给我一行。如何添加这三行？谢谢。

编辑：这是更多的代码，您可以在其中查看其位置。 （在Bootstrap Navbar中）（在此代码中，在我解析它时显示，一一包裹）。

<div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav navbar-left">
                        <MenuNavItem to='/administrador/inicio' index={true} /*menuItemActive="inicio"*/>Inicio</MenuNavItem>
                        <MenuNavItem to='/administrador/nueva_incidencia' /*menuItemActive="nueva_incidencia"*/>Nueva Incidencia</MenuNavItem>
                        <MenuNavItem to='/administrador/incidencias_recibidas' /*menuItemActive="incidencias_recibidas"*/>Incidencias Recibidas</MenuNavItem>
                        <MenuNavItem to='/administrador/informes' /*menuItemActive="informes"*/>Informes</MenuNavItem>
                    </ul>

                    <ul class="nav navbar-nav navbar-right">
                        <li class="divider visible-xs-block"></li>
                        {this.state.logged === true ? <p class="nav navbar-text hidden-xs"><span class="glyphicon glyphicon-user"></span> Bienvenido, {this.state.nombre} ({this.state.dni})</p> : ''}
                        {this.state.logged === true ? <p class="nav navbar-text visible-xs-block"><span class="glyphicon glyphicon-user"></span> Bienvenido, {this.state.nombre}</p> : ''}
                        {this.state.logged === false ? <li class="entrar"><a href="http://www.upct.es/"><span class="glyphicon glyphicon-user"></span> Entrar</a></li> : ''}
                        {this.state.logged === true ? <li class="salir"><a href="http://www.upct.es/"><span class="glyphicon glyphicon-off"></span> Salir</a></li> : ''}
                    </ul>
                </div>

最佳答案

我有点改变了您的解决方案：

{this.state.logged && <p class="nav navbar-text hidden-xs"><span class="glyphicon glyphicon-user"></span> Bienvenido, {this.state.nombre} ({this.state.dni})</p>}
{this.state.logged && <p class="nav navbar-text visible-xs-block"><span class="glyphicon glyphicon-user"></span> Bienvenido, {this.state.nombre}</p>}
{!this.state.logged && <li class="entrar"><a href="http://www.upct.es/"><span class="glyphicon glyphicon-user"></span> Entrar</a></li>}
{this.state.logged && <li class="salir"><a href="http://www.upct.es/"><span class="glyphicon glyphicon-off"></span> Salir</a></li>}

关于javascript - 如果出错-ReactJS，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43813625/