React循环遍历渲染数组对象

我们就做个最基本得案例，底部导航栏

我们在seate里面定义数组

 state = {
        list: [
            { id: 1, text: '首页' },
            { id: 2, text: '分类' },
            { id: 3, text: '我的' },
        ],
        nav: 1
    }

react得循环渲染跟vue不一样，vue咱们都是用里面封装好的的方法，而react用的是原生js map 方法来实现循环渲染数据的。这就跟别人常说的，react若无需要，勿增实例。

// 内容
<div className='body'>
    {this.which()}
</div>
// 底部导航栏
<div className='nav_header'>
     {this.state.list.map((item, index) =>
         <div key={index}
              className={this.state.nav == item.id ? 'active' : ''}
              onClick={() => {
                  // 通过点击事件去给 this.state.nav 重新赋值
                  this.state.nav = item.id
                  this.setState({
                     // 更改底部导航选中状态
                     nav: this.state.nav
                   })
               }}>
              <span className='btn'>{item.text}</span>
          </div>
      )}
</div>

这里面的key值也是代表唯一标识的意思。

this.setState方法

我们都知道vue里面有双向数据绑定效果，数据更新视图也会随之更新。但是react没有，所以我们这里就需要通过this.setState方法更改数据，让组件的render重新渲染，并且刷新数据。

我们要实现的是点击导航里面的内容也会随之切换。我们这里调用 which 方法来判断展示的组件内容

which() {
     switch (this.state.nav) {
         case 1:
               return <Home></Home>
         case 2:
               return <Classify></Classify>
         case 3:
               return <User></User>
         default:
               return null
     }
}