web前端全系列 教程
1839个小节阅读:2243.2k
目录
鸿蒙应用开发
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本,未来主流的版本
人工智能 教程
顺势而为,AI创新未来
大厂算法 教程
算法,程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
列表是页面常见的展示效果
可以通过使用 {}
在 JSX 内构建一个元素集合。
xxxxxxxxxx
return (
<ul>
{
["前端团队","后端团队","设计团队"].map((item,index) =>{
return <li key={ index }>{ item }</li>
})
}
</ul>
)
复杂数据列表渲染
xxxxxxxxxx
const list = [
{
"id": 2208287,
"desc": "鄞州:家有富矿,博物馆的美好力量,你get到了吗? “21世纪的博物馆拥有巨大的",
"title": "果小桃"
},
{
"id": 2208760,
"desc": "梅里雪山北坡|我的第二次重装徒步·附攻略1 篇1⃣️ \t 字数限制🚫详细攻略会分",
"title": "小蘑猪zcy"
},
{
"id": 2208882,
"desc": "☀️巴塞罗那观赏日落的好去处 巴塞罗那,一座地中海城市,融合了罗马、中世纪的风格",
"title": "Go旅城通票"
}
]
return <ul>
{
list.map((item, index) => {
return (
<li key={item.id}>
<h3>{item.title}</h3>
<p>{item.desc}</p>
</li>
)
})
}
</ul>
实时效果反馈
1. 下列___处应该填写:
xxxxxxxxxx
return <ul>
{
['react','前端'].map((item, index) => {
return (
<li key={ index }>
{ ___ }
</li>
)
})
}
</ul>
A {item}
B {index}
答案
1=>A