javascript - ReactJs - 当特定的 NavLink 处于事件状态时在元素上插入新的 css 类

Question

我有这个应用程序。除了我在这篇文章标题中写的内容之外，一切都在成功运行。

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

您如何在上面的代码中看到，我有一个 react 函数来检测某个页面是否处于事件状态。该功能运行成功。当我输入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""> 。我该如何解决？

Answer 1

您可以为投资组合类保留一个状态属性，并通过 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