<!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. 在RockyLinux 9.3环境中采用RPM模式部署Oracle 19C

    在RockyLinux 9.3环境中采用RPM模式部署Oracle 19C 用途 在开发数据库系统时,可以验证功能是否与Oracle的表现一致,验证正确性和兼容性 限制 虚拟机安装,CPU 2*4 内 ...

  2. 力扣378(java&python)-有序矩阵中第 K 小的元素（中等）

    题目: 给你一个 n x n 矩阵 matrix ,其中每行和每列元素均按升序排序,找到矩阵中第 k 小的元素.请注意,它是 排序后 的第 k 小元素,而不是第 k 个 不同 的元素. 你必须找到一个 ...

  3. 云原生消息、事件、流超融合平台——RocketMQ 5.0 初探

    简介: 今天分享的主题是云原生消息事件流超融合平台 RocketMQ 5.0 初探,内容主要分为三个部分: 首先,带大家回顾业务消息领域首选 RocketMQ 4 发展历史以及 4.x 版本的演进与发 ...

  4. [公链观点] BTC 1.0, ETH 2.0, EOS 3.0, Dapp, WASM, DOT, ADA, VNT

    Dapp 发展史 WASM 兼容Web的编码方式 Cardano(ADA 艾达币) 权益挖矿 VNT chain 解决联盟链和公链的跨链基础项目 跨链项目 Polkadot (DOT 波卡币) 是不是 ...

  5. 每天5分钟复习OpenStack（十三）存储缓存技术Bcache

    Ceph作为一个分布式存储,在项目中常见的形态有两者,一种是采用 SSD 或NVME 磁盘做Ceph的日志盘,使用SATA磁盘来做数据盘.这样的好处是比较经济实惠.另一种则是全部采用 SSD 或NVM ...

  6. WPF 使用 Dispatcher 的 InvokeAsync 和 BeginInvoke 的异常处理差别

    一般认为 WPF 的 Dispatcher 的 InvokeAsync 方法是 BeginInvoke 方法的平替方法和升级版,接近在任何情况下都应该在业务层使用 InvokeAsync 方法代替 B ...

  7. dotnet 使用 ConfigureAwait.Fody 库设置默认的 await 同步上下文切换配置

    在 dotnet 里面,使用 await 进行异步逻辑,默认是会尝试切换回调用 await 的线程同步上下文.这个机制对于大多数的上层应用来说都是符合逻辑且方便的逻辑,例如对于带 UI 线程的 WPF ...

  8. 读取 k8s 存储在 etcd 上的数据

    读取 k8s 存储在 etcd 上的数据 Etcd Assistant 是一款 Etcd 可视化管理工具,便捷高效地操作您的 etcd 集群:支持多种键的视图:管理租约.用户.角色和权限. etcd是 ...

  9. 17.prometheus服务发现&基于文件的服务发现

    一.服务发现 Prometheus 中是如何使用服务发现来查找和抓取目标的.我们知道在 Prometheus 配置文件中可以通过一个 static_configs 来配置静态的抓取任务,但是在云环境下 ...

  10. 大模型_2.2：Prompt示例

    1.行业洞察分析 行业洞察分析的方法论:使用麦肯锡工作法可以快速了解一个行业. Step1:通过搜索分析几十个与该行业相关的关键词,覆盖该行业的上下游,以获取全面的信息. Step2:阅读一些行业最新 ...