Question

选择导航项时，如何在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 &&
              <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，使其与非活动状态相同。

希望这有帮助。

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>;

您可以使用不同的状态来指定应添加和删除的类。这也有助于DRY原则，因为它会阻止您在所有Navbar中重复自己。

Answer 3

如果您设置activeKey =“”，则所有链接都不处于活动状态，只有活动键具有背景。

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

如何在React-Bootstrap中删除活动背景

3 个答案: