Блог

Как я могу удалить функцию активного фона элемента навигации в react-bootstrap при выборе элемента навигации? Он работает неправильно, когда я использую его с ‘react-redux’ и ‘react-router-bootstrap’?

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

 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 amp;amp;
              <LinkContainer to="/signout">
                <NavItem className="nav-link" eventKey={4}>Sign Out</NavItem>
              </LinkContainer>}
            {!authenticated amp;amp;
              <LinkContainer to="/signin">
                <NavItem className="nav-link" eventKey={5}>Sign In</NavItem>
              </LinkContainer>}
            {!authenticated amp;amp;
              <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);
  

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

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

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

Вы должны создать класс в качестве переменной и использовать 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>;
  

Вы можете использовать разные состояния, чтобы указывать, какие классы следует добавлять и удалять. Это также помогает с принципами DRY, поскольку не позволит вам повторяться во всей панели навигации.

Если вы установите activeKey=»», то ни одна из ссылок не активна, и фон получает только активный ключ.

 <Nav activeKey="">
...
</Nav>