React循环列表
时间:2023-8-20 23:39 作者:六思逸 分类: React
使用map方法,对每一条数据进行循环,循环的值会产生一个新的数组,React检测到数组里面有标签会自动展开,再给每一个循环的标签设置一个唯一KEY可以让提高性能让React最小密度更新。
import './Hello.css';
import { useState } from 'react';
export default function Hello() {
let [arr, newarr] = useState([{ title: '标题1', url: 'http://localhost' }, { title: '标题2', url: 'http://localhost' }, { title: '标题3', url: 'http://localhost' }, { title: '标题4', url: 'http://localhost' }])
return (
<div>
<ul>
{
arr.map((v, i) => <li className={i === 0 ? 'h1' : ''} key={i}><a href={v.url}>{v.title}</a></li>)
}
</ul>
</div>
);
}
标签: React循环列表
扫描二维码,在手机上阅读
推荐阅读: