<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>hell world</title>

  <style>

    .red {

      color: red

    }

  </style>

</head>

<body>

  <!-- 用于内容显示容器 挂载点 -->

  <div id="app"></div>

  <!-- react核心类库 -->

  <script src="./js/react.development.js"></script>

  <!-- dom操作 -->

  <script src="./js/react-dom.development.js"></script>

  <!-- 解析jsx语法的兼容库 -->

  <script src="./js/babel.min.js"></script>

  <script type="text/babel">

    const app = document.querySelector('#app')

    // 一维数组

    const users = ['张三', '李四', '王五', '东炎']

    // jsx => js扩展

    // 如果是单行则不需要小括号，多行需要使用小括号括起来

    const vnode = (<div>

      {

        // 一组数组可以直接写变量，就会自动循环解析

      }

      {users}

      <hr />

      <ul>

        {

          // 在jsx中循环输出可以使用 map 必须要有return

          /* users.map((item,index)=>{

            return <li>{item}</li>

          }) */

          //users.map((item,index)=><li>{item}</li>)

          /* users.map((item, index) => {

            return (<li>

              <h3>你好世界</h3>

              {item}

            </li>)

          }) */

          // 最终写法 key唯一 diff算法所用

          users.map((item, index) => (

            <li key={index}>

              <h3>你好世界</h3>

              {item}

            </li>

          )) 

        }

      </ul>

    </div>)

    // 把虚拟dom转为真实的dom并挂载到页面中

    ReactDOM.render(vnode, app)

  </script>

</body>

</html>

react 数组列表的更多相关文章

  1. React Native 列表的总结

    React Native 列表的总结 FlatList和SectionList都是React Native中高性能的列表组件.这些新的列表组件在性能方面都有了极大的提升, 其中最主要的一个是无论列表有 ...

  2. ArrayList数组列表

    ArrayList数组列表 Collection接口和List接口的区别 List接口扩充了Collection接口,添加了索引相关的方法. code example Object get(int i ...

  3. 泛型数组列表 ArrayList

    为什么使用泛型数组列表而不使用普通数组? 1.普通数组经常会发生容量太大以致浪费的情况 2.普通数组无法动态更改数组 基本概念: 1.采用[类型参数]的[类]---->[泛型类] 2.[泛型类型 ...

  4. 变长数组列表ArrayList

    简介:此数据结构定义为一个ArrayList结构体类型,维护了一个内部堆数组.通过realloc函数实现了数组容量自动扩充,每次扩充到原来的2倍. 通过函数指针实现了使用者根据自己的需求按条件按查找目 ...

  5. js数组(列表)的基本操作

    本文主要介绍JS对数组(列表)的基本操作.习惯了用数据库的操作顺序来说明:增.删.改.查:合并,裁剪,排序,格式化. 一.数组元素的添加(增加) 增加数组元素有三种方法:unshift()  push ...

  6. c#简单实现二维数组和二维数组列表List&lt;&gt;的转置

    刚看到网上一篇文章里用sql实现了行列转置.sql server 2005/2008只用一个pivot函数就可以实现sql server 2000很多行的复杂实现.提到转置,立刻想起还在求学阶段曾经做 ...

  7. Java数组列表反转

    在Java中,如何反转数组列表中的元素? 以下示例使用Collections.reverse(ArrayList)方法反转数组列表中的元素. package com.yiibai; public cl ...

  8. java 泛型数组列表

    如下代码: package com.company; import java.lang.reflect.Array; import java.util.ArrayList; public class ...

  9. 前端 javascript 数据类型 数组 列表

    javascript数组相当于python的列表 创建列表 a = [1,2,3,4]; [1, 2, 3, 4] 获取列表长度 a = [1,2,3,4]; [1, 2, 3, 4] a.lengt ...

  10. python数组列表、字典、拷贝、字符串

    python中字符串方法 name = "I teased at life as if it were a foolish game" print(name.capitalize( ...

随机推荐

  1. JS - JavaScript 主要知识点（基础夯实）

    纲要 基本类型和引用类型 类型判断 强制类型转换 作用域 执行上下文 理解函数的执行过程 this 指向 闭包 原型和原型链 js 的继承 event loop 基本类型和引用类型 js中数据类型分为 ...

  2. 5月25日，阿里云开源 PolarDB-X 将迎来重磅升级发布

    ​简介:2022年5月25日,阿里云开源 PolarDB-X 将升级发布新版本!PolarDB-X 从 2009 年开始服务于阿里巴巴电商核心系统, 2015 年开始对外提供商业化服务,并于 2021 ...

  3. KubeVela：标准化的云原生平台构建引擎

    简介: 本文由"GO 开源说"第三期 KubeVela 直播内容修改整理而成,视频内容较长,本文内容有所删减和重构. KubeVela 的背景 KubeVela 是一个基于 Go ...

  4. [FAQ] pdf 无法导入 adobe AI, 分辨率 or 颜色缺失 or 字体缺失

    属于Adoge软件不支持问题, 可能是分辨率.字体等多种原因. https://www.codebye.com/adobe-reader-or-acrobat-opens-pdf-file-drawi ...

  5. [Contract] Solidity 合约使用 truffle 部署到测试网和主网

    使用 truffle 发布到非本地的以太坊主网或者测试网时,需要提供钱包的助记词或私钥. 首先安装 truffle 组件:npm install @truffle/hdwallet-provider ...

  6. SAP集成技术（十三）SAP Cloud Integration

    异构应用环境给IT带来了各种问题.在这种情况下,混合集成环境尤其受到影响.同时,对于建立在混合IT环境上的数字化转型项目,数据集成和跨系统访问已经开始发挥核心作用.为了满足不断增长的需求,SAP Bu ...

  7. 游戏陪玩公众号H5软件开发方案图文详解

    用户需求 无论开发怎样的产品,都需要事先对整个市场行情和用户需求进行简单的了解.前面的一组数据已经简明扼要的摆明了现在陪玩市场的行情.而现如今,大多数游戏都需要组队进行,如英雄联盟.王者荣耀.绝地求生 ...

  8. juc之ConcurrentHashMap在我工作中的实践

    Map是我工作中应用比较多的数据结构之一,主要用来存储一些kv的映射信息,如果是单线程环境下我会优先使用HashMap,但是如果在多线程环境下继续使用HashMap我不确定会不会被我老大打死,为了生命 ...

  9. 使用beego/bee热启动gin框架

    目录 1.需要关闭gomod 2.安装 bee 3.再开启gomod 4.启动服务 效果: 1.需要关闭gomod export GO111MODULE=off 2.安装 bee go get -u ...

  10. WebKist Inside: CSS 样式表的组成

    1 StyleSheet 一张 StyleSheet 由一系列 Rules 组成,这些 Rules 可以分成 2 大类: 1 Style Rule 2 At-Rule 下面的例子展示了 Style R ...