Javascript 根据按钮显示特定元素

我需要在同一页上显示不同的元素，使用四个按钮对其进行过滤。如果单击NavigationBar组件的第一个按钮，则必须显示一个特定的div

我的主页必须显示不同的元素：

class Home extends Component {

  constructor(props) {
    super(props);
  }

  showContent() {
    alert('ok');
  }

  render() {
    return (
      <div className="container">
        <Header activeLink={['home']}/>
        <p>Some texte here</p>
        <NavigationBar onClick={this.showContent} firstSection="L'entreprise" secondSection="Pourquoi nous choisir ?"/>
        <Footer/>
      </div>
    );
  }
}

export default Home;

class Home扩展组件{
建造师（道具）{
超级（道具）；
}
showContent（）{
警报（“正常”）；
}
render（）{
返回(
这里有一些短信

);
}
}
导出默认主页；

我的导航栏组件有四个按钮：

class NavigationBar extends Component {

  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div className="navigation-bar flex row between">
        <div onClick={() => {this.props.onClick()}}>
          <p>{this.props.firstSection}</p>
        </div>
        <div onClick={() => {this.props.onClick()}}>
          <p>{this.props.secondSection}</p>
        </div>
        <div onClick={() => {this.props.onClick()}}>
          <p>{this.props.thirdSection}</p>
        </div>
        <div onClick={() => {this.props.onClick()}}>
          <p>{this.props.fourthSection}</p>
        </div>
      </div>
    );
  }
}

export default NavigationBar;

类导航栏扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
{this.props.onClick（）}>
{this.props.firstSection}

{this.props.onClick（）}>
{this.props.secondSection}

{this.props.onClick（）}>
{this.props.thirdSection}

{this.props.onClick（）}>
{this.props.fourthSection}

);
}
}
导出默认导航栏；

---

有了这段代码，我可以在单击NavigationBar组件的div时显示警报（“ok”），但我不知道如何识别单击了哪个div。如果我知道如何做到这一点，我可以很容易地显示特定的元素。谢谢你的帮助

onClick处理程序将为您提供一个事件对象。将该事件对象传递回

showContent

。还可以向元素添加标识信息：

this.props.onClick（e）}>

然后：

---

你有固定数量的div吗？或者它们是动态的？

showContent(e) {
  console.log(e.target.getAttribute('data-key'));
}