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

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

reactjs javascript

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 年前

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