react基础（5）—— 循环

最新推荐文章于 2025-07-26 19:19:17 发布

转载最新推荐文章于 2025-07-26 19:19:17 发布 · 200 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yangxueyou/articles/9850963.html

文章标签：

#javascript #ViewUI

本文介绍在React中如何利用ECMAScript的数组方法map()进行数据循环渲染。通过实例展示，具体说明了如何在组件的状态中定义一个数组，并使用map()方法遍历数组，为每个元素创建并返回一个带有唯一key的li元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

react中的循环需要我们使用ECMA中的方法进行操作，没有提供内置的方法，

这里面我们使用数组的方法进行循环 ----- {arr.map()}

###################循环##############################

import React,{Component} from "react";
import "./index.scss"

class Nowplaying extends Component {
constructor(props){
super(props)
this.state={
nowplayList:["1111","2222","3333","4444"]

//以后这个状态通过ajax动态获取，然后通过this.setState=({})来复制
}
}
render(){
return <div id="Nowplaying">
<ul>
{ {/*不设置key值会有warning* ----- 在操作数组的时候使用不会改变原数组的方法/}
this.state.nowplayList.map(item=>
<li key={item}>{item}</li>
)
}
</ul>
</div>
}
}