<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8" />

    <title>Learn React</title>

    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>

    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>

    <!-- 生产环境中不建议使用 -->

    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

</head>

<body>

<div id="root"></div>

<script type="text/babel">

    function ListItem(props){

        return <li>{props.value}</li>;

    }

    function NumberList(props) {

        const numbers = props.numbers;

        const listItems = numbers.map((number) =>

            <ListItem

                key={number.toString()}

                value = {number}

            />

        );

        return (

            <ul>{listItems}</ul>

        );

    }

    const numbers = [1, 2, 3, 4, 5];

    ReactDOM.render(

    <NumberList numbers={numbers} />,

        document.getElementById('root')

    );

</script>

</body>

</html>

React-列表 & Key的更多相关文章

  1. React之key详解

    一个例子 有这样的一个场景如下图所示,有一组动态数量的input,可以增加和删除和重新排序,数组元素生成的组件用index作为key的值,例如下图生成的ui展示: 上面例子中的input组件渲染的代码 ...

  2. React 列表页面传递参数

    React 列表进入详情页面 首先安装 react-router-dom (4.0) npm/yarn install react-router-dom 路由跳转配置 列表 父组件 this.prop ...

  3. React中key的必要性与使用

    React这个框架的核心思想是,将页面分割成一个个组件,一个组件还可能嵌套更小的组件,每个组件有自己的数据(属性/状态);当某个组件的数据发生变化时,更新该组件部分的视图.更新的过程是由数据驱动的,新 ...

  4. React中key的讲解

    通过阅读React的文档我们知道React这个框架的核心思想是,将页面分割成一个个组件,一个组件还可能嵌套更小的组件,每个组件有自己的数据(属性/状态);当某个组件的数据发生变化时,更新该组件部分的视 ...

  5. react中key值的理解

    react利用key来识别组件,它是一种身份标识标识,相同的key react认为是同一个组件,这样后续相同的key对应组件都不会被创建有了key属性后,就可以与组件建立了一种对应关系,react根据 ...

  6. 【react】---react中key值的作用

    一.React中key值得作用 react中的key属性,它是一个特殊的属性,它是出现不是给开发者用的,而是给React自己使用,有了key属性后,就可以与组件建立了一种对应关系,简单说,react利 ...

  7. vue中：key 和react 中key={} 的作用，以及ref的特性？

    vue中:key 和react 中key={} 为了给 vue 或者react 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性 一句话概括就是 ...

  8. react列表中，当key改变后发生的事情

    Main.jsx export default class Main extends PureComponent { constructor(props) { super(props); this.s ...

  9. react列表数据显示

    react的列表数据一般是用map循环显示的. 使用map注意:map的回调函数为箭头函数时,后面如果加大括号(箭头函数常规编写),必须要有return才可以,如果箭头函数后面没有大括号(箭头函数简写 ...

  10. react 列表渲染

    https://reactjs.org/docs/lists-and-keys.html#keys 以下代码运行会报错:Warning: Each child in an array or itera ...

随机推荐

  1. C# 应用 - 使用 WebClient 发起 Http 请求

    1. 需要的库类 \Reference Assemblies\Microsoft\Framework\.NETFramework\v4.7.2\System.dll System.Net.WebCli ...

  2. 【linux】驱动-1-环境准备

    目录 前言 1. 开发环境搭建 1.1 环境准备 1.1.1 安装工具 1.1.2 编译内核 1.1.2.1 获取内核源码 1.1.2.2 编译内核 1.2 内核驱动模块编译和加载 1.2.1 hel ...

  3. C语言之预处理详解

    C语言之预处理详解 纲要: 预定义符号 #define #define定义标识符 #define定义宏 #define的替换规则 #与## 几点注意#undef 带副作用的宏参数 宏和函数的对比 命名 ...

  4. PAT (Advanced Level) Practice 1031 Hello World for U (20 分) 凌宸1642

    PAT (Advanced Level) Practice 1031 Hello World for U (20 分) 凌宸1642 题目描述: Given any string of N (≥5) ...

  5. 从阿里云迁移分布式redis实例到华为云解决方案（详细）

    如果要换多数是经济因素啦- 一. 准备工作 先在华为云上买一台redis数据库,配置一定要注意多数要保持一致,至于4.0还是5.0倒问题不大亲测兼容 可用区要找现有ECS云主机中的相同的机器.记下:这 ...

  6. 将Java编译为本地代码

    将Java编译为本地代码 通常Java程序的执行流程为:将Java代码编译为Byte Code(字节码),然后JVM执行引擎执行编译好的Byte Code.这是一种中间语言的特性,它的好处就是可以做到 ...

  7. kubernetes 降本增效标准指南| 资源利用率提升工具大全

    背景 公有云的发展为业务的稳定性.可拓展性.便利性带来了极大帮助.这种用租代替买.并且提供完善的技术支持和保障的服务,理应为业务带来降本增效的效果.但实际上业务上云并不意味着成本一定较少,还需适配云上 ...

  8. java面试-生产环境出现CPU占用过高，谈谈你的分析思路和定位

    思路:结合Linux和JDK命令一起分析 1.用top命令找出CPU占比最高的进程 2.ps -ef|grep java|grep -v grep 或者jps -l进一步定位,得知是怎样一个后台程序惹 ...

  9. TCP 和 UDP 协议简介

    一.TCP TCP(Transmission Control Protocol),传输控制协议,对"传输.发送.通信"进行"控制"的协议,它充分地实现了数据传输 ...

  10. Dynamics CRM制作报表的时候让用户可以用自己的权限浏览数据

    我们做SSRS报表的时候最头疼的问题就是用Sql查出来的数据都是全部数据没有做权限过滤,导致不同用户看到的数据是一样的. 确实Dynamics CRM产品的数据库时有对这个做处理的,其中每个实体都会有 ...