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

如何在reactjs中检测包含特定类的子节点?

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

    我用reactjs完成了这个渲染

    RelDead(){

        return (
          <div>
            <Router>
              <div className="wrapper2">
                <nav id="menu-principal" className="main menu-principal">
                  <ul>
                    <li><NavLink className="home-link" exact to="/">início</NavLink></li>
                    <li><NavLink exact to="/nota_biografica">nota biográfica</NavLink></li>
    
                  </ul>
                </nav>
                <div className="page-content">
                  <Route exact path='/nota_biografica' render={() => <NotaBiografica />} />                  
                  <Route exact path='/' render={() => <Home />} />
                </div>
              </div>
            </Router>
          </div>
        )
      }
    

    当我单击包含“主链接”类的链接时,我想做一些操作。就像我在下面的示例中尝试做的一个不起作用的操作。我怎么解决?谢谢您。

    var el = document.querySelector(".menu-principal");
          el.onclick = (event) => {                 
            for(var i = 0; i < el.childNodes.length; i++) {
              if(el.childNodes[i].className === "home-link"){
                alert('true')
              }
            }
          }
    
    1 回复  |  直到 6 年前
        1
  •  2
  •   Bayu    6 年前

    因为你的目标元素是 <NavLink> 标签通常应该导航到另一个路由器页面,我相信您所附加的事件不会运行。我建议你不要用 <纳夫林克公司; 只使用 this.props.history.push('/path/to/route') 而不是 onClick 处理程序(在导航到另一个路由地址之前需要运行的过程之后)。

    在下面的例子中,请注意 withRouter 我改变 <纳夫林克公司; 跨越然后连接 onHomeCLick 处理程序:

    import React, {Component} from 'react';
    import {withRouter, Route, BrowserRouter as Router} from "react-router-dom";
    class YourComponent extends Component {
    
      onHomeCLick = () => {
        //DO something here prior to router navigation of ".home-link" element
    
        this.props.history.push( '/' );
      };
    
      render(){
        return (
          <div>
            <Router>
              <div className="wrapper2">
                <nav id="menu-principal" className="main menu-principal">
                  <ul>
                    <li><span className="home-link" onClick={this.onHomeCLick}>início</span></li>
                    <li><NavLink exact to="/nota_biografica">nota biográfica</NavLink></li>
    
                  </ul>
                </nav>
                <div className="page-content">
                  <Route exact path='/nota_biografica' render={() => <NotaBiografica />} />
                  <Route exact path='/' render={() => <Home />} />
                </div>
              </div>
            </Router>
          </div>
        )
      }
    
    }
    
    export default withRouter( YourComponent );
    

    更新========

    如果你想用另一个技巧 <纳夫林克公司; 唯一的解决方案是“回电”方式。一旦你导航到路线,它就会触发(我仍然看不到在导航之前有没有办法做到这一点)。我们走到这里:

    import React, {Component} from 'react';
    import {Route, BrowserRouter as Router} from "react-router-dom";
    
    class YourComponent extends Component {
    
      isActive= (match, location) => {
        if (match) {
          console.log('Hi i am active, do something here');
        }
        return match;
      };
    
      render(){
        return (
          <div>
            <Router>
              <div className="wrapper2">
                <nav id="menu-principal" className="main menu-principal">
                  <ul>
                    <li><NavLink className="home-link" activeClassName="active" isActive={this.isActive}>início</NavLink></li>
                    <li><NavLink exact to="/nota_biografica">nota biográfica</NavLink></li>
    
                  </ul>
                </nav>
                <div className="page-content">
                  <Route exact path='/nota_biografica' render={() => <NotaBiografica />} />
                  <Route exact path='/' render={() => <Home />} />
                </div>
              </div>
            </Router>
          </div>
        )
      }
    
    }
    
    export default YourComponent;