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