根据按钮显示特定元素

我需要在同一页上显示不同的元素，使用四个按钮来过滤它。如果我点击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;

和我的带有四个按钮的NavigationBar组件：

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;

使用此代码，当我单击NavigationBar组件的div时，我可以显示警告(‘ok’)，但我不知道如何识别所单击的div。如果我知道如何做到这一点，我可以很容易地显示特定的元素。谢谢你的帮助。

转载请注明出处:http://www.jxbyjx.net/article/20230526/1221731.html