代码之家  ›  专栏  ›  技术社区  ›  claudiopb

ReactJs-当特定的导航链接处于活动状态时,在元素上插入一个新的css类

  •  0
  • claudiopb  · 技术社区  · 6 年前

    class PortfolioMenu extends Component {
      isActive= (match, location) => {
        if (match) {
         if (document.querySelector('.portfolio-menu')){
         document.querySelector('.portfolio-menu').className += " new-classjs";
         }
        }
        return match;
      };
    
      render(){   
        return (
          <div>
            <Router>
              <div class="wrapper2">
                <div class="wrapper-portfolio">
                  <Route exact path='/portfolio' render={() => <Intro />} />
                  <Route exact path='/portfolio/casas' render={() => <Casas />} />               
                </div>
                <nav>
                  <ul className="portfolio-menu">
                    <li><NavLink activeClassName="active" isActive={this.isActive} exact to="/portfolio">• introdução</NavLink></li>
                    <li><NavLink activeClassName="active" exact to="/portfolio/casas">• casas</NavLink></li>
    
                  </ul>
                </nav>
              </div>
            </Router>
          </div>
        )
      }
      }
    
    
    export default PortfolioMenu
    

    console.log(page detected)

    isActive= (match, location) => {
        if (match) {
         if (document.querySelector('.portfolio-menu')){
         document.querySelector('.portfolio-menu').className += " new-classjs";
         }
        }
        return match;
    

    因此,问题的根源在于,在这个特殊情况下,函数体中发生的情况不起作用。除了“portfolio menu”类之外,我还想总结一下“new classjs”类: <ul className="portfolio-menu new-classjs""> . 我怎样才能解决它?

    1 回复  |  直到 6 年前
        1
  •  2
  •   Gabriele Petrioli    6 年前

    您可以为portfolio类保留一个状态属性,并从 isActive 方法

    class PortfolioMenu extends Component {
      state = {
        portfolioClass: ""
      };
    
      isActive = (match, location) => {
        const { portfolioClass } = this.state;
        const newClass = match ? "new-classjs" : "";
        if (newClass !== portfolioClass)
          this.setState({ portfolioClass: newClass });
        return match;
      };
    
      render() {
        const { portfolioClass } = this.state;
        return (
          <div>
            <Router>
              <div class="wrapper2">
                <div class="wrapper-portfolio">
                  <Route exact path="/portfolio" render={() => <Intro />} />
                  <Route exact path="/portfolio/casas" render={() => <Casas />} />
                </div>
                <nav>
                  <ul className={`portfolio-menu ${portfolioClass}`}>
                    <li><NavLink activeClassName="active" isActive={this.isActive} exact to="/portfolio">• introdução</NavLink></li>
                    <li><NavLink activeClassName="active" exact to="/portfolio/casas">• casas</NavLink></li>
                  </ul>
                </nav>
              </div>
            </Router>
          </div>
        );
      }
    }
    

    演示 https://codesandbox.io/s/p91xk60p6j