文章阅读

沉浸阅读完整内容

写文章

React如何进行列表循环

正在统计阅读人数 正在统计字数
登录收藏0
字号 100%

使用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如何进行列表循环

推荐阅读

4 篇精选
文章 / 82本地存储和会话存储的用法和区别 文章 / 84vue 底部选项卡 文章 / 81BUG记录 文章 / 83vue 页面传递参数和接收参数

发表评论

评论 0

还没有评论,欢迎留下第一条讨论。

分享精彩,传递价值

生成专属海报,分享你的文章,让更多人发现好内容

浏览器不支持 Canvas,无法生成海报。

每日签到

每天来这里,记录一点持续积累。

当前积分--积分
本月签到--
本月获得--积分
正在读取