当前位置: 首页 > news >正文

react经验9:循环渲染的语法活用

在react中,循环渲染一般这么写

<ul>
{list.map(item=>(<li key={item.key}>{item.value}</li>))
}
</ul>

react语法规定每个循环的标签需要加不重复的key,只能有一个根标签。
如果一次循环要输出多个标签怎么办?

import {Fragment} from 'react'
<ul>
{list.map((item,index)=>(<Fragment key={item.key}><li>{item.value}</li>{(index<list.length-1)&&(<li>&gt;</li>)}</Fragment>))
}
</ul>

这个例子是一次循环输出两个标签,key加在了Fragment上。

Fragment在react中表示空标签,用于向语法妥协的占位,平时可简写为"<></>"
在需要加key的时候要写完整名称。

相关文章:

  • AI数字人短视频变现项目:打造短视频运营变现新模式
  • shell 循环 判断
  • mmsegmentation的config文件配置
  • 动态路由协议
  • 传奇手游详细图文架设教程
  • C++面试经典问题-Union联合
  • 系分备考计算机网络传输介质、通信方式和交换方式
  • 大功率直流电子负载
  • 宝宝洗衣机买几公斤?婴儿专用洗衣机测评
  • 嵌入式培训机构四个月实训课程笔记(完整版)-Linux网络编程第二天-tcp编程练习(物联技术666)
  • Linux文件隐藏属性及chattr和lsattr命令
  • 【C语言】操作符
  • CTF CRYPTO 密码学-1
  • Netty-Netty组件了解
  • Apache StringUtils:Java字符串处理工具类
  • es6
  • happypack两次报错的问题
  • jdbc就是这么简单
  • leetcode-27. Remove Element
  • Webpack入门之遇到的那些坑,系列示例Demo
  • 道格拉斯-普克 抽稀算法 附javascript实现
  • 如何设计一个微型分布式架构?
  • 三分钟教你同步 Visual Studio Code 设置
  • 微信小程序设置上一页数据
  • 智能情侣枕Pillow Talk,倾听彼此的心跳
  • ​ ​Redis(五)主从复制:主从模式介绍、配置、拓扑(一主一从结构、一主多从结构、树形主从结构)、原理(复制过程、​​​​​​​数据同步psync)、总结
  • ​​快速排序(四)——挖坑法,前后指针法与非递归
  • ​DB-Engines 12月数据库排名: PostgreSQL有望获得「2020年度数据库」荣誉?
  • ​草莓熊python turtle绘图代码(玫瑰花版)附源代码
  • ​你们这样子,耽误我的工作进度怎么办?
  • #include
  • #NOIP 2014# day.1 T3 飞扬的小鸟 bird
  • $Django python中使用redis, django中使用(封装了),redis开启事务(管道)
  • $GOPATH/go.mod exists but should not goland
  • (1)SpringCloud 整合Python
  • (2)STL算法之元素计数
  • (3)llvm ir转换过程
  • (二)正点原子I.MX6ULL u-boot移植
  • (附源码)springboot学生选课系统 毕业设计 612555
  • (教学思路 C#之类三)方法参数类型(ref、out、parmas)
  • (蓝桥杯每日一题)love
  • (全注解开发)学习Spring-MVC的第三天
  • (转)LINQ之路
  • ****** 二 ******、软设笔记【数据结构】-KMP算法、树、二叉树
  • ******IT公司面试题汇总+优秀技术博客汇总
  • .NET CLR Hosting 简介
  • .NET 使用 XPath 来读写 XML 文件
  • .NET/C# 使用 #if 和 Conditional 特性来按条件编译代码的不同原理和适用场景
  • .NET连接数据库方式
  • .NET实现之(自动更新)
  • .NET业务框架的构建
  • .NET应用架构设计:原则、模式与实践 目录预览
  • /usr/bin/env: node: No such file or directory
  • @AutoConfigurationPackage的使用
  • [ 手记 ] 关于tomcat开机启动设置问题