React 循环_心动止于人海。的博客-程序员秘密_react 循环

技术标签: React.js  

/*循列表环

     循环就用 this.props.data.map( (item,index) => { return <li key={index}>{item}</li> } )
      根据数组中的内容生成一个包含有结构的新数组
      通过数组生成的结构,每一个元素必须包含有一个key属性,同时这个key属性的值必须是唯一的
 */ 

var dataList = {
    friends: {
    name: "好友",
    list: [
      {
        username: "九华彩",
        message:
          "什么叫做人脉?人脉并不是你认识多少人,而是你有困难时,有多少人来帮助你。",
        vip: true,
      },
    ],
  },
}

//循环对象
class Panel extends React.Component {
      render() {
          return (
            <div className="panel">
              {Object.keys(this.props.data).map((item, index) => { //item 相当于key
                return <Group key={index} data={this.props.data[item]}></Group>;
              })}
            </div>
          );
        }
      }

//循环列表
class Group extends React.Component {
      render() {
          return (
            <div>
              <h2 className="title">{this.props.data.name}</h2>
              <List data={this.props.data.list}></List>
            </div>
          );
        }
      }

 

<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script src="js/babel.min.js"></script>
  </head>
  <body>
    <div id="app"></div>

    <script type="text/babel">
      /**
       * React没有模板语法,插值表达式中只支持表达式,不支持语句:for,if
       *
       */

      var users = ["小红", "小明", "小花"];
      var obj = { left: 100, top: 200 };

      class List extends React.Component { //首字母必须大写
        render() {
          return this.props.data.map((item, index) => {
            return <li key={index}>{item}</li>;
          });
        }
      }

      ReactDOM.render(
        <div>
          <ul>
            {
              users.map((user, index) => {
                return <li key={index}>{user}</li>;
              })
            }
          </ul>

          <ul>
            <List data={users} />
          </ul>

          <ul>
            {
              //循环对象
              /*['left', 'top'] Left - 100*/
              Object.keys(obj).map((key) => {
                return (
                  <li key={key}>
                    {key} - {obj[key]}
                  </li>
                );
              })
            }
          </ul>
        </div>,
        document.getElementById("app")
      );
    </script>
  </body>

 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/a772116804/article/details/110846006

智能推荐

关于kali中base64的加解密使用_Wood木头的博客-程序员秘密_base64解码 kali

关于kali中base64的加解密使用有时候我们在抓包的途中会发现,很多数据都是以类base64的形式存在的,拿到Docoder中解密又是二进制或者其他形式的乱码!有时候说不定是压缩包的二进制呢。众所周知,基础的base64是由A-Z、a-z、0-9、+、/组成的kali中如何使用base64base64 【选项】 【文件/base64码】选项:-d,,–decode 解码数据-i, --ignore-garbag 解码时忽略非字母字符,这玩意儿还可以绕过编码流中的无效字符

从零开始做自动驾驶1 GNSS模块_你好哇zzz的博客-程序员秘密

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一、自动驾驶开源代码二、GNSS模块1.GNSS 数据结构2.GNSS的订阅模块总结前言提示:跟随大神手敲一遍自动驾驶代码。一、自动驾驶开源代码来源:https://zhuanlan.zhihu.com/p/105512661记录出现的问题和进度二、GNSS模块1.GNSS 数据结构头文件: 类中为什么设置static 成员函数、成员变量的?static成员变量为啥类外初始化? Geographic

Android 源码分析之基于Stagefright的MediaPlayer播放框架[4]_avel__的博客-程序员秘密

先上图,以免一大堆的代码引来大家的不适。在prepare结束后,就可以调用start方法开始播放了。为了简单起见,我们对start之前的调用关系不做分析,仅仅列出这些方法的实现。public void start() throws IllegalStateException { if (isRestricted()) { _setVo

解决数据库无法连接的问题_行走的疯子的博客-程序员秘密_无法连接到数据库

怎么解决mysql服务无法启动的问题听语音|浏览:17107|更新:2016-12-19 18:501234567分步阅读作为一名程序猿,必不可少的便是和mysql打交道,那当mysql服务无法启动时该怎么解决呢?下面有一些具体的操作可以提供参考。工具/原料mysql方法/步骤找到mysql安装目录,将其配置文件my.default.ini改名为my.ini,并且将my.ini移至bin目录下。启...

cocos2d-x 如何制作一个类马里奥的横版平台动作游戏续 2_天马流星2719的博客-程序员秘密

欢迎回来,上篇我们讲到了物理引擎中重力环境模拟以及主角考拉与地面墙壁的碰撞,相信大家已经对2D世界的物理模拟有了一定的了解,现在我们接着讲如何让考拉动起来吧!     让考拉动起来!

编程之外:使用Latex/Tex创建自己的简历。_scdxmoe的博客-程序员秘密

http://www.cnblogs.com/aoaoblogs/archive/2013/01/24/2874595.html 使用Latex/Tex创建自己的简历。正在折腾Latex,看到篇博客Creating a Resume Using LaTeX, 于是也把自己的简历用Latex重新写了一遍,好处就是可以使用git来管理自己的简历版本了,比

随便推点

mysql安装2019.9.4_Kakio的博客-程序员秘密

mysql直接下载免安装版,解压完之后,在cmd里面设置账号密码,然后安装可视化图形操作,sqlyog,要替换注册表,否则是收费版的

PAT甲级1072 Gas Station (30 分)题解_程勇uestc的博客-程序员秘密

\quad这个题要求每个加油站到所有居住地的最短距离,最长距离和平均距离。其中最长距离用于判断该加油站位置是否符合要求,最短距离和平均距离需要输出并保留一位小数。我用1到N表示居民居住地,N+1到N+M+1表示加油站,这样计算出某个加油站到其他地点的距离,保存在数组中,再进行处理。\quad在所有位置合法的加油站中,以最大化该加油站到居住地的最短距离为第一标准,最小化加油站到居住地的平均距离为...

C语言复习--数组_玖生_1的博客-程序员秘密

一、定义和引用一维数组1.定义一维数组的一般形式为:类型符 数组名[常量表达式];例如:int a[10];即定义了一个整形数组,包含10个整型元素。注:数组的下标是从0开始的,即10个整型元素分别为a[0],a[1],a[2],a[3],a[4],a[5],a[6],a[7],a[8],a[9]。2.引用数组元素的表示形式为:数组名[下标];例如:a[7]即为数组a中序号...

ZOJ-Intervals_KEMNHan的博客-程序员秘密

题意:最少拿走哪几个区间可以保证覆盖区间三个内至少有一对不相交贪心做法,根据左端点进行排序,右端点大的优先被拿走,影响最小的保留,三个排序判断位置,队列维护下index数组存一下下标。#include&lt;bits/stdc++.h&gt;#define LL long longusing namespace std;const int maxn=50005;i...

macos big sur系统写入权限被限制的这几款软件已经修复!包括cad2021_mac666999的博客-程序员秘密_bigsur系统写入权限

macOS Big Sur正式版将强大实力和优美外观的结合提升到一个崭新的高度。精心雕琢的全新设计,让您能淋漓尽致地感受 Mac 的魅力;Safari 浏览器迎来重大更新,待您饱览;地图 App 和信息 App 满载新功能,任您探索;更透明的***权限,保护也更周到。新系统升级总要一段时间的磨合期,限制各种软件不兼容和奔溃问题还是屡屡存在,特别是一些软件的注册机直接被限制打开,本站为了方便用户专门修复了cad2021中文版,OmniGraffle Pro版和Mindjet MindManager 201

20150131--XML上_weixin_30553837的博客-程序员秘密

20150131--XML上 万能的数据传输格式——XML上 目录 万能的数据传输格式——XML上... 1 一、XML简介... 3 1、历史起源... 3 2、什么是xml 3 3、xml与html区别... 4 4、xml应用场景... 4 1)充当程序间...