Как удалить активный фон в React-Bootstrap

Question

Как удалить активную функцию фона Nav Item в реакции-бутстрапа при выборе пункта Nav? Это ненормально действует, когда я использую его с «реакцией-редукцией» и «реакцией-маршрутизатором-бутстрапом»?

Например, когда я перезагружаю домашнюю страницу, активный фон остается только на одном из элементов Nav, даже если я выбираю другие элементы Nav. Ниже изображен образ элемента navitem (Dashboard) и код для навигатора! Любые рекомендации были бы очень признательны!

import React, {Component, PropTypes} from 'react'; 
import {connect} from 'react-redux'; 
import {LinkContainer, IndexLinkContainer} from 'react-router-bootstrap'; 

import { 
    Nav, 
    NavItem, 
    Navbar 
} from 'react-bootstrap'; 

class NavBar extends Component { 

    render() { 
    const {authenticated} = this.props; 
    return (
     <Navbar> 
     <Navbar.Header> 
      <Navbar.Brand> 
      <a href="/">Timesheet App</a> 
      </Navbar.Brand> 
      <Navbar.Toggle/> 
     </Navbar.Header> 
     <Navbar.Collapse> 
      <Nav> 
      <IndexLinkContainer to="/"> 
       <NavItem className="nav-link" eventKey={1}>Dashboard</NavItem> 
      </IndexLinkContainer> 
      <LinkContainer to="/timesheet/new"> 
       <NavItem className="nav-link" eventKey={2}>Submit Time</NavItem> 
      </LinkContainer> 
      <LinkContainer to="/user/Andriy"> 
       <NavItem className="nav-link" eventKey={3}>Andriy Time</NavItem> 
      </LinkContainer> 
      {authenticated && 
       <LinkContainer to="/signout"> 
       <NavItem className="nav-link" eventKey={4}>Sign Out</NavItem> 
       </LinkContainer>} 
      {!authenticated && 
       <LinkContainer to="/signin"> 
       <NavItem className="nav-link" eventKey={5}>Sign In</NavItem> 
       </LinkContainer>} 
      {!authenticated && 
       <LinkContainer to="/signup"> 
       <NavItem className="nav-link">Sign Up</NavItem> 
       </LinkContainer>} 
      </Nav> 
     </Navbar.Collapse> 
     </Navbar> 
    ); 
    } 
} 

NavBar.propTypes = { 
    authenticated: PropTypes.bool 
}; 

function mapStateToProps(state) { 
    return { 
    authenticated: state.auth.authenticated 
    }; 
} 

export default connect(mapStateToProps)(NavBar); 

Answer 1

Если вы хотите, активный фон нет, это может быть просто CSS только исправить.

Просто переопределите CSS для активного состояния фона/границы/etc, чтобы он был таким же, как и неактивное состояние.

Надеюсь, это поможет.

Answer 2

Вы должны создать класс как переменную и использовать classNames, чтобы изменить его на основе любой логики, которую вы решили использовать.

Затем вы можете определить что-то в CSS для устранения активного фона.

Например (взято из документации):

var btnClass = 'btn'; 
if (this.state.isPressed) btnClass += ' btn-pressed'; 
else if (this.state.isHovered) btnClass += ' btn-over'; 
return <button className={btnClass}>{this.props.label}</button>; 

Вы можете использовать различные состояния, чтобы диктовать, что должны быть добавлены классы и удалены. Это также помогает с принципами СУХОЙ, так как это предотвратит повторение вас во всех Navbar.