React-数据遍历渲染举例
1、实现效果
2、代码
对应代码:
import React, { Component } from 'react'
export default class Message extends Component {
state = {
messageArr:[
{id:'01',title:'消息1'},
{id:'02',title:'消息2'},
{id:'03',title:'消息3'},
]
}
render() {
const {messageArr} = this.state; // 解构赋值
return (
<div>
<ul>
{
messageArr.map(msgObj => {
return (
<li key={msgObj.id}>
<a href="/message1">{msgObj.title}</a>
</li>
)
})
}
</ul>
</div>
)
}
}
These are bilibili尚硅谷React学习视频的 学习笔记~