React 循环
耿运浩
/*循列表环
循环就用 this.props.data.map( (item,index) => { return <li key={index}>{item}</li> } )
根据数组中的内容生成一个包含有结构的新数组
通过数组生成的结构，每一个元素必须包含有一个key属性，同时这个key属性的值必须是唯一的
*/
var dataList = {
friends: {
name: "好友",
list: [
{
username: "九华彩",
message:
"什么叫做人脉？人脉并不是你认识多少人，而是你有困难时，有多少人来帮助你。",
vip: true,
},
],
},
}
//循环对象
class Panel extends React.Component {
render() {
return (
<div className="panel">
{Object.keys(this.props.data).map((item, index) => { //item 相当于key
return <Group key={index} data={this.props.data[item]}></Group>;
})}
</div>
);
}
}
//循环列表
class Group extends React.Component {
render() {
return (
<div>
<h2 className="title">{this.props.data.name}</h2>
<List data={this.props.data.list}></List>
</div>
);
}
}
<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script src="js/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
/**
* React没有模板语法，插值表达式中只支持表达式，不支持语句：for，if
*
*/
var users = ["小红", "小明", "小花"];
var obj = { left: 100, top: 200 };
class List extends React.Component { //首字母必须大写
render() {
return this.props.data.map((item, index) => {
return <li key={index}>{item}</li>;
});
}
}
ReactDOM.render(
<div>
<ul>
{
users.map((user, index) => {
return <li key={index}>{user}</li>;
})
}
</ul>
<ul>
<List data={users} />
</ul>
<ul>
{
//循环对象
/*['left', 'top'] Left - 100*/
Object.keys(obj).map((key) => {
return (
<li key={key}>
{key} - {obj[key]}
</li>
);
})
}
</ul>
</div>,
document.getElementById("app")
);
</script>
</body>
类似资料：