Javascript 如何在reactJs中检测包含特定类的子节点？

我让reactJS完成了这个渲染

render（）{

返回(

伊尼西奥
诺塔比戈拉菲卡酒店

} />                  
} />
)
}

当我点击包含“home link”类的链接时，我想做一些动作。就像我在下面的例子中尝试做的一个动作，但没有成功。我怎样才能解决它？多谢各位

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

var el=document.querySelector（“.menu-principal”）；
el.onclick=（事件）=>{
对于（变量i=0；i

因为您的目标元素是

标签，通常应该导航到另一个路由器页面，所以我相信您附加的事件不会运行。我建议您不要使用

只需在

onClick

处理程序上使用

this.props.history.push（'/path/to/route'）

（完成导航到其他路由地址之前需要运行的过程）

在下面的示例中，请注意路由器的

，
，我将
更改为span，然后在HomeClick上附加
处理程序到它：

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}来自'React'；
从“react Router dom”导入{withRouter，Route，BrowserRouter as Router}；
类YourComponent扩展组件{
onHomeCLick=（）=>{
//在路由器导航“.home link”元素之前，在此处执行一些操作
this.props.history.push（'/'）；
};
render（）{
返回(

伊尼西奥
诺塔比戈拉菲卡酒店

} />
} />
)
}
}
使用路由器导出默认值（您的组件）；

更新===========

另一个诀窍如果你喜欢使用
，唯一的解决办法就是“回拨”方式。一旦您导航到路线，它就会触发（我仍然看不出在导航之前是否有方法这样做）。我们开始：

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;

import React，{Component}来自'React'；
从“react Router dom”导入{Route，BrowserRouter as Router}；
类YourComponent扩展组件{
isActive=（匹配，位置）=>{
如果（匹配）{
log（“嗨，我很活跃，在这里做点什么”）；
}
复赛；
};
render（）{
返回(

伊尼西奥
诺塔比戈拉菲卡酒店

} />
} />
)
}
}
导出默认组件；
您想做的“某些动作”是什么？此外，
NavLink
是路由器的一部分，当您单击它时，它已经执行了一项操作。（导致呈现不同的
路线
）这并不重要。我还没有建立一个功能，它将在未来触发。有一段时间，如果子节点有一个“home link”类，我只想提醒“true”。谢谢，但这是强制性的吗？停止使用“NavLink”通过使用Ref进行我的应用程序工作？我更新我的答案为不使用Ref，并给出如何使用Ref的示例，您可以只使用Handler并使用路由器的
功能来获得
this.props.history.push（“/router/path”）
。但我喜欢使用“NavLink”中的“activeClassName”。它是否在“withRouter”上工作？或者是否存在另一个类似的？嗯，我不确定是否有真正的解决方案。因为React使用的是“合成”事件，这意味着我们无法轻松地执行类似于
事件的操作。preventDefault（）
或类似的东西来手动处理
。如果它符合您的
需要，我将用另一个技巧更新我的答案。谢谢。我期待着您的答案
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;