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学习视频的 学习笔记~