react循环输出元素
代码说明:index—>索引
key:循环语句时的唯一标识
一、循环普通数组
1、map循环方式(foreach同理)
render() {
const items = ["山东", "菏泽", "牡丹之乡"];
return (
<div>
{items.map(item => (
<div key={item}>{item}</div>
))}
{/*key的唯一标识之索引方式*/}
{items.map((item, index) => (
<div key={index}>{item}</div>
))}
</div>
);
}
2、for循环方式
render() {
const items = ["菏泽", "牛牛牛", "牡丹之乡"];
var result = [];
for (var i = 0; i < items.length; i++) {
result.push(<div key={i}>{items[i]}</div>)
}
return (
</div>
{result}
</div>
);
}
二、循环json
字符串
render() {
const items = [
{ id: 2, name: '胡晓恒' },
{ id: 1, name: 'hxh' },
{ id: 0, name: 'huxiaoheng' }
];
return (
<div>
{items.map((item) => (
<div key={item.id}>{item.name}</div>
))}
</div>
);
}
三、循环对象object
2、实现方式2
render() {
const items = {
"id2": "hhh",
"id1": "xxx",
"id0": "hhhkkk",
}
var result = [];
for (const key in items) {
result.push(<div key={key}>{items[key]}</div>)
}
return (
<div>
{result}
</div>
);
}
1、实现方式1
import React from 'react'
const objData = {
1: '我是第一条数据',
2: '我是第二条数据',
3: '我是第三条数据',
}
export default function ForRender() {
return (
<div>
<ul>
{
Object.entries(objData).map(([id, text]) => {
return <li key={id}>{id + '、' + text}</li>
})
}
</ul>
</div>
)
}
这里最应该注意的就是,一定要输出key={}
,而且{}
内部要保证这个值的唯一性。
四、实战环节
后台给的数据肯定错综复杂,就比如:(我只想循环遍历这里面的所有username的值)。
function App() {
const items = [
{
id1: [
{ id: 1, username: "胡晓恒1" },
{ id: 2, name: "hxh" },
{ id: 3, name: "huxiaoheng" },
],
},
{
id1: [
{ id: 4, username: "胡晓恒2" },
{ id: 5, name: "hxh" },
{ id: 6, name: "huxiaoheng" },
],
},
];
let result = [];
for (var i = 0; i < items.length; i++) {
result.push(items[i].id1[0]);
}
return (
<div>
{result.map((item) => (
<div key={item.id}>{item.username}</div>
))}
</div>
);
}
export default App;