React学习——页面内实现不同组件内容的跳转

能想到的方法有两种：

1.通过js改变每个组件的style值来选择是否显示该组件内容。

该方法实现起来步骤比较繁琐，首先要将组件全部显示在要展示的盒子中，选择要展示的组件将其display属性设置为非‘none’值，而不展示的属性则设置为‘none’，需要改变展示的组件的时候则将其改变为可显示其他的改为‘none’。

2.通过给每个组件设置对应的属性值，在该属性值的时候展示相应组件。

通过state设置出默认值，然后属性值与目前的值做对比，每个div对应的onclick都将属性值改为自己要展示的组件的内容及可展示出相应的组件。

  state = {
    isshow:'1'
  }
  onClick={() => {
            this.setState({
              isshow:'2'
  }) 
 {this.state.isshow === '1' && <Jieshao></Jieshao>}
 {this.state.isshow === '2' && <Yuanli></Yuanli>}
 {this.state.isshow === '3' && <Zidongbaojing></Zidongbaojing>}
 {this.state.isshow === '4' && <Tance></Tance>}
 {this.state.isshow === '5' && <Son></Son>}