Question

我有一个名为MenuAlumno的React-Component，它是一个Bootstrap NavBar。我是ES6 - ReactJS - React-Router。

这是我的组成部分：

render() {
    return (
        <nav class="navbar navbar-default">

            <div class="navbar-header">
              <button type="button" class="navbar-toggle navbar-collapse-left" data-toggle="collapse" data-target="#idNavBarCollapsed" aria-expanded="false">
                <span class="sr-only">Menú</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand visible-xs-block" /*href="http://www.upct.es/"*/><span id="idTextoLogotipo">- INCIDENCIAS -</span></a>
            </div>

            <div id="idNavBarCollapsed" class="collapse navbar-collapse">
              <ul class="nav navbar-nav navbar-left">
                    <li><Link to='/administrador/inicio'>Inicio</Link></li>
                    <li><Link to='/administrador/nueva_incidencia'>Nueva Incidencia</Link></li>
                    <li><Link to='/administrador/incidencias_recibidas'>Incidencias Recibidas</Link></li>
                    <li><Link to='/administrador/informes'>Informes</Link></li>
                </ul>

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

        </nav>
    );
}

但是当我点击<li>时，它没有设置为活动状态。我怎么能解决这个问题？我尝试过很多不同的事情，但我还没有实现这个目标......

此外，我希望如果我在导航栏上未定义的路线（例如：/administrador/inicio/hi/How_are_you/Fine），则相应的<li>将设置为活动状态（在此示例中为：{{1但是，如果我有另一个元素（在NavBar上定义）：/administrador/inicio这不活跃（我通过window.location.pathname.include（'/ administrador / inicio'）说这个 - 这个将激活两个链接 - ）。仅激活父/administrador/inicio/hi（将<li>引发给我的网址），而不是'可能的父母'。

另外，我希望当我点击F5时，它会继续显示为活动状态。

在这个项目中我不能使用React-Bootstrap，所以这个选项是不可能的。

我一直在试着解决这个问题，但我仍然没有得到它。欢迎任何帮助。

谢谢大家。

Answer 1

求助：

render() {
    return (
        <nav class="navbar navbar-default">

            <div class="navbar-header">
              <button type="button" class="navbar-toggle navbar-collapse-left" data-toggle="collapse" data-target="#idNavBarCollapsed" aria-expanded="false">
                <span class="sr-only">Menú</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand visible-xs-block" /*href="http://www.upct.es/"*/><span id="idTextoLogotipo">- INCIDENCIAS -</span></a>
            </div>

            <div id="idNavBarCollapsed" class="collapse navbar-collapse">
              <ul class="nav navbar-nav navbar-left">
                    <li><NavLink to='/administrador/inicio'>Inicio</NavLink></li>
                    <li><NavLink to='/administrador/nueva_incidencia'>Nueva Incidencia</NavLink></li>
                    <li><NavLink to='/administrador/incidencias_recibidas'>Incidencias Recibidas</NavLink></li>
                    <li><NavLink to='/administrador/informes'>Informes</NavLink></li>
                </ul>

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

        </nav>
    );
}

Answer 2

我之前遇到过这个问题。你应该注意一下这个道具＆＃39;路线，你可以找到路线已经改变，然后你通过这个改变来做一些事情。

Answer 3

可能是你在寻找这个

var selector = '.nav li';

$(selector).on('click', function(){
    $(selector).removeClass('active');
    $(this).addClass('active');
});

li.active {
    color: Red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
    <li style="cursor:pointer">Inicio</li>
    <li style="cursor:pointer">Nueva Incidencia</li>
    <li style="cursor:pointer">Incidencias Recibidas</li>
    <li style="cursor:pointer"> Informes</li>
</ul>

Bootstrap NavBar不会使用React-Router设置li class =“active”。 ReactJS

3 个答案: