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. DBProxy

    DBProxy/USER_GUIDE.md at master · Meituan-Dianping/DBProxy   https://github.com/Meituan-Dianping/DBP ...

  2. Jenkins和maven自动化构建java程序

    转自:http://www.cnblogs.com/gao241/archive/2013/04/08/3008380.html,版权归原作者所有. Jenkins是一个非常出色的持续集成服务器,本文 ...

  3. SpringMvc+Mybatis+Maven+Mysql做一个CRUD的简单例子

    本文档结合 SpringMVC. Mybatis. MySQL,说明如何实现一个简单的数据库单表 CRUD操作.开发工具使用集成了spring mvc的eclipse(Spring Tool Suit ...

  4. [Android Pro] 关于Android 7.0无法进行https抓包的问题

    cp from  : https://www.cnblogs.com/wytings/p/6954293.html 在App进行数据请求的时候,如果每次都打印log去判断是一件很不“人性化”的操作行为 ...

  5. C# 获取文件名及扩展名【转】

    https://www.cnblogs.com/libushuang/p/5794976.html C# 获取文件名及扩展名 string aFirstName = aFile.Substring(a ...

  6. Permutations II leetcode java

    题目: Given a collection of numbers that might contain duplicates, return all possible unique permutat ...

  7. fetch使用的常见问题及其解决办法

    摘自: https://segmentfault.com/a/1190000008484070 fetch使用的常见问题及其解决办法 javascript wonyun 2月25日发布 |   0 收 ...

  8. MySQL到底能支持多大的数据量?

    MySQL是中小型网站普遍使用的数据库之一,然而,很多人并不清楚MySQL到底能支持多大的数据量,再加上某些国内CMS厂商把数据承载量的责任推给它,导致很多不了解MySQL的站长对它产生了很多误解,那 ...

  9. ThinkPhp 使用PhpExcel导出导入多语言文件

    在ThinkPHP 里已经实现了多语言功能,只要在指定的目录下创建对应的语言文件并填充内容,即可实现多语言功能 而多语言的翻译却是一个很麻烦的事情,因为客户特定的行业问题导致我们翻译可能是不准确的 于 ...

  10. c++11 简明学习

    https://coolshell.cn/articles/5265.html http://www.cnblogs.com/me115/p/4800777.html#h29 https://chan ...