Question

我在页面的侧面有一个导航栏。我是通过react bootstrap网站获得的，因此预先加载了类名等。与其使用切换汉堡包徽标来展开/折叠导航，不如希望在鼠标输入/离开时进行操作。到目前为止，这是我迄今为止的尝试，我为鼠标进入和离开做了两个处理程序，并且我使用了inspect元素，因此列出了导航器在展开和折叠时的类名。

然后我尝试根据导航器是在导航器中还是从导航器中给出这些类的名称，但这是行不通的:( help pls

class App extends Component {
  render() {

    let sideNav;

    const mouseEnter = e => {
      sideNav = "sideNav sidenav---sidenav---_2tBP sidenav---expanded---1KdUL";
      console.log("Mouse entered");
      return sideNav;
    }    

    const mouseLeave = e => {
      sideNav = "sidenav---sidenav---_2tBP sidenav---collapsed---LQDEv";
      console.log("mouse left");
      return sideNav;
    }

    return (
      <div className="App container">
        <div>
          <SideNav 
            onMouseEnter={mouseEnter} 
            onMouseLeave={mouseLeave}
            className={this.sideNav}
            onSelect={(selected) => {
                // Add your code here
            }}
          >
            <SideNav.Toggle  />
            <SideNav.Nav  defaultSelected="home">
                <NavItem eventKey="home">
                    <NavIcon>
                        <Link to="/"><img src={Dash}/></Link>
                    </NavIcon>
                    <NavText>
                        <Link to="/">Dashboard</Link>
                    </NavText>
                </NavItem>
                <NavItem eventKey="sites">
                    <NavIcon>
                      <Link to="/sites"><img src={Site} /></Link>
                    </NavIcon>
                    <NavText>
                        <Link to="/sites">Sites</Link>
                    </NavText>
                </NavItem>
                <NavItem eventKey="tours">
                  <NavIcon>
                    <Link to="/tours"><img src={Tour}/></Link>
                  </NavIcon>
                  <NavText>
                      <Link to="/tours">Tours</Link>
                  </NavText>
                </NavItem>
                <NavItem eventKey="media">
                    <NavIcon>
                      <Link to="/media"><img src={Media}/> </Link>
                    </NavIcon>
                    <NavText>
                        <Link to="/media">Media</Link>
                    </NavText>
                </NavItem>
                <NavItem eventKey="newSite">
                    <NavIcon>
                        <Link to="/newSite/details"><img src={NewSite} /></Link>
                    </NavIcon>
                    <NavText>
                        <Link to="/newSite/details">Add new Site</Link>
                    </NavText>
                </NavItem>
                <NavItem eventKey="profile">
                    <NavIcon>
                        <Link to="/profile"><img src={Profile} /></Link>
                    </NavIcon>
                    <NavText>
                        <Link to="/profile">Profile</Link>
                    </NavText>
                </NavItem>

            </SideNav.Nav>
          </SideNav>
        </div>
        <Routes />
      </div>
    );
  }
}

export default App;

Answer 1

我认为您应该在组件的状态下使用sideNav，因为这是重新渲染元素的反应方式。每次使用setSate时，都会在代码中进行响应搜索以显示所需内容。当您只更新变量时，react并不知道。因此，您的代码可能会像这样执行工作：

class App extends Component {
  constructor(){
      super();
      this.state = {
        sideNav: ''
      }
  }
    const mouseEnter = e => {
      this.setState({sideNav: "sideNav sidenav---sidenav---_2tBP sidenav---expanded---1KdUL"});
      console.log("Mouse entered");
    }    

    const mouseLeave = e => {
      this.setState({sideNav: "sidenav---sidenav---_2tBP sidenav---collapsed---LQDEv"});
      console.log("mouse left");
    }
  render() {

    return (
      <div className="App container">
        <div>
          <SideNav 
            onMouseEnter={mouseEnter} 
            onMouseLeave={mouseLeave}
            className={this.state.sideNav}
            onSelect={(selected) => {
                // Add your code here
            }}
          >
            <SideNav.Toggle  />
            <SideNav.Nav  defaultSelected="home">
                <NavItem eventKey="home">
                    <NavIcon>
                        <Link to="/"><img src={Dash}/></Link>
                    </NavIcon>
                    <NavText>
                        <Link to="/">Dashboard</Link>
                    </NavText>
                </NavItem>
                <NavItem eventKey="sites">
                    <NavIcon>
                      <Link to="/sites"><img src={Site} /></Link>
                    </NavIcon>
                    <NavText>
                        <Link to="/sites">Sites</Link>
                    </NavText>
                </NavItem>
                <NavItem eventKey="tours">
                  <NavIcon>
                    <Link to="/tours"><img src={Tour}/></Link>
                  </NavIcon>
                  <NavText>
                      <Link to="/tours">Tours</Link>
                  </NavText>
                </NavItem>
                <NavItem eventKey="media">
                    <NavIcon>
                      <Link to="/media"><img src={Media}/> </Link>
                    </NavIcon>
                    <NavText>
                        <Link to="/media">Media</Link>
                    </NavText>
                </NavItem>
                <NavItem eventKey="newSite">
                    <NavIcon>
                        <Link to="/newSite/details"><img src={NewSite} /></Link>
                    </NavIcon>
                    <NavText>
                        <Link to="/newSite/details">Add new Site</Link>
                    </NavText>
                </NavItem>
                <NavItem eventKey="profile">
                    <NavIcon>
                        <Link to="/profile"><img src={Profile} /></Link>
                    </NavIcon>
                    <NavText>
                        <Link to="/profile">Profile</Link>
                    </NavText>
                </NavItem>

            </SideNav.Nav>
          </SideNav>
        </div>
        <Routes />
      </div>
    );
  }
}

export default App;

此外，您可以在这里查看其工作原理https://reactjs.org/docs/state-and-lifecycle.html

鼠标进入/离开时展开和折叠导航键，REACT

1 个答案: