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. strcpy和memcpy的差别

    strcpy和memcpy都是标准C库函数.它们有以下的特点. strcpy提供了字符串的复制. 即strcpy仅仅用于字符串复制.而且它不仅复制字符串内容之外,还会复制字符串的结束符,strcpy_ ...

  2. Android四大组件应用系列5——使用AIDL实现跨进程调用Service

    一.问题描述 Android应用程序的四大组件中Activity.BroadcastReceiver.ContentProvider.Service都可以进行跨进程.在上一篇我们通过ContentPr ...

  3. Android性能优化-内存优化

    原文链接 Manage Your App’s Memory 前言 在任何软件开发环境中,RAM都是比较珍贵的资源.在移动操作系统上更是这样,因为它们的物理内存通常受限.尽管在ART和Dalvik虚拟机 ...

  4. Android中使用adb访问SQLite的方法

    (1)打开命令提示符,输入:adb,按回车,如果得到下面一大堆命令说明(如图 1),表示adb的配置是成功的,如果提示"不是内部或外部命令,也不是可运行的程序或批处理文件",那么需 ...

  5. 〖Android〗Android App项目资源字符串检查(检查是否缺少对应的翻译,导致系统切换语言后崩溃)

    Android项目开发过程中,容易出现缺少对应中英文翻译的情况,这个Python脚本是用于检查字符串是否缺少了对应的翻译 #!/usr/bin/env python # encoding: utf-8 ...

  6. 海量数据拆分到nosql系统的一种方案

    获取某用户的好友最新动态. 我们大体上来说先按照用户ID将用户的好友一致性哈希到几个mongodb集群,然后把用户的最新信息也存储到mongodb中.然后利用消息系统保持数据库中的数据和mongdb中 ...

  7. 初始cfx开发webservice, 简单实例应用

    项目结构图: 步骤一: 添加maven 依赖包 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi=&q ...

  8. 设置log rotation避免tomcat catalina.out文件增长过大

    创建logrotate配置文件 $ vi /etc/logrotate.d/tomcat 添加以下内容: /opt/tomcat/logs/catalina.out { copytruncate da ...

  9. MySQL 5.6新特性 -- Multi-Range Read

    如果基表很大,数据没有被缓存,在二级索引上使用范围扫描读取行可能会导致大量的随机磁盘访问.使用Multi-Range Read新特性,mysql可以减少对磁盘的随机读的次数:首先,mysql只是扫描索 ...

  10. [docker]使用quaaga实现(rip ospf)实现主机间容器互通

    使用quaaga实现(rip ospf)实现主机间容器互通 - n1设置 brctl addbr br0 ip a a 10.1.1.1/24 br0 ip a a 10.1.1.1/24 dev b ...