react的列表数据一般是用map循环显示的。

使用map注意:map的回调函数为箭头函数时,后面如果加大括号(箭头函数常规编写),必须要有return才可以,如果箭头函数后面没有大括号(箭头函数简写),可以不用加return。

这是因为:箭头函数简写时只需要一个表达式和一个返回值。常规编写时必须有一个明确的返回值。

不加return如下:

如下代码加return:

class MyMenue extends Component {
render() {
const arry = ["首页", "管理", "详情", "联系"];
return (
<ul className = "nav navbar-nav " >
{
arry.map((element) =>{
return(
<li key = { element } >
<a className = "" > { element} </a>
</li >)
})
} </ul> )
}
}

react列表数据显示的更多相关文章

  1. React 列表页面传递参数

    React 列表进入详情页面 首先安装 react-router-dom (4.0) npm/yarn install react-router-dom 路由跳转配置 列表 父组件 this.prop ...

  2. react 列表渲染

    https://reactjs.org/docs/lists-and-keys.html#keys 以下代码运行会报错:Warning: Each child in an array or itera ...

  3. 甩掉DataList,Repeater,列表数据显示得灵活--转

    在WebForm 显示列表数据我们一般使用服务器控件Repeater.DataList或者GridView ,功强大能,使用简单.但同时也是有代价的, 一:不管你用哪个控件都需要牺牲一些额外的性能,因 ...

  4. 1-Recyclerview使用系列之Recyclerview的列表数据显示

    使用步骤已经写到我的公众号,二维码在下面,欢迎关注,谢谢. 本人联系方式: 更多精彩分享,可关注我的微信公众号: 若想给予我分享更多知识的动力,请扫描下面的微信打赏二维码,谢谢!: 微信号:Weixi ...

  5. React列表

    const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((numbers) => <li>{numbers}&l ...

  6. react列表中,当key改变后发生的事情

    Main.jsx export default class Main extends PureComponent { constructor(props) { super(props); this.s ...

  7. Devxtreme 显示Master-Detail数据列表, 数据显示颜色

    ////刷新3/4簇Grid //function GetClusterGrid(id, coverageId, clusterId) { // var region = getRegionCityN ...

  8. 微信小程序云开发-数据库-商品列表数据显示N条数据

    一.wxml文件 在wxml文件中,写页面和点击事件,添加绑定事件limitGoods  二.js文件 在js文件中写limitGoods(),使用.limit(3)表示只显示3条数据

  9. 基于CkEditor实现.net在线开发之路(7)列表页面开发动作介绍

    一个列表页面不止是查询,它也包含了很多业务上功能的实现,这些业务功能的实现的逻辑我称之为动作.如触发单击按钮删除数据,更改业务表数据,调用webService,调用WCF接口,弹出新窗体新增.修改.查 ...

随机推荐

  1. Linux学习笔记12—磁盘管理

    一.查看磁盘或目录的容量 1.  df命令 作用:查看已挂载磁盘的总容量.使用容量.剩余容量等,可以不加任何参数,默认是按k为单位显示的 参数: -I : 查看inodes使用状况 -h: 使用合适的 ...

  2. Instruments

    链接: iOS性能优化:Instruments使用实战 iOS 使用Instruments的工具小结    

  3. CentOS 7卸载Docker

    1.先查询所有安装的包 yum list installed | grep docker*或者rpm -qa docker* 2.删除查询出来的包 # 一般情况会有一个 yum remove -y d ...

  4. SpringBoot日志logback-spring.xml分环境log4j logback slf4j区别 springboot日志设置

    转载. https://blog.csdn.net/qianyiyiding/article/details/76565810 springboot按照profile进行打印日志log4j logba ...

  5. Android系统资源图标android.R.drawable

    Android™ 2.1 android.R.drawable Icon Resources Android™ 1.5 android.R.drawable Icon Resources Androi ...

  6. windows 系统中的 afd 驱动

    afd 的全称是 Ancillary Function Driver for WinSock,是 windows 系统网络部分的核心工具.同 Linux 类似,windows 的 socket 最终也 ...

  7. oracle数据库将一列的值拼接成一行,并且各个值之间用逗号隔开

    使用场景:把某一列值转换为逗号分隔的字符串 例子:比如查询所有的的表空间如下,现在要获得所有的表空间用逗号分隔的字符串(比如rman duplicate的时候skip表空间) SQL> sele ...

  8. win32 进程崩溃时禁止弹出错误对话框

    在程序初始化的时候加入以下代码即可: SetErrorMode(SEM_FAILCRITICALERRORS | SEM_NOGPFAULTERRORBOX);    _set_abort_behav ...

  9. swift3 与 OC 语法区别

    1.Swift还增加了Objective-C中没有的类型比如元组(Tuple). 元组可以让你创建或者传递一组数据,比如作为函数的返回值时,你可以用一个元组可以返回多个值. 元组(tuples)把多个 ...

  10. Clustered Shading架构实现步骤

    最终决定越过Forward+,一步到位,直接调整至更先进的Clustered架构.步骤如下: 里程碑1:以CPU方式实现Light Culling,旨在理念验证,并与D3D10兼容里程碑2:以GPU ...