<!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. 谈谈注册中心 zookeeper 和 eureka中的CP和 AP

    谈谈注册中心 zookeeper 和 eureka中的CP和 AP 前言 在分布式架构中往往伴随CAP的理论.因为分布式的架构,不再使用传统的单机架构,多机为了提供可靠服务所以需要冗余数据因而会存在分 ...

  2. Java概述与准备

    Java概述 Java语言背景介绍 Java之父:詹姆斯·高斯林(James Gosling)   java语言的三个版本: JavaSE: Java 语言的(标准版),用于桌面应用的开发,是其他两个 ...

  3. P2261 [CQOI2007]余数求和 【整除分块】

    一.题面 P2261 [CQOI2007]余数求和 二.分析 参考文章:click here 对于整除分块,最重要的是弄清楚怎样求的分得的每个块的范围. 假设$ n = 10 ,k = 5 $ $$  ...

  4. 多线程之volative关键字

    目录 轻量级同步机制:volative关键字 volative的作用 volatile非原子特性 volatile与synchronized比较 常用原子类进行自增自减操作 CAS 使用CAS原理实现 ...

  5. Bi-shoe and Phi-shoe LightOJ - 1370(数论+素数筛）

    题目链接:https://vjudge.net/problem/LightOJ-1370 题意:给你N个欧拉函数值,找出每一个大于等于该欧拉函数值的数,并且要求相加和最小. 题解:因为素数i的欧拉函数 ...

  6. PTA 中序输出叶子结点

    6-8 中序输出叶子结点 (10 分)   本题要求实现一个函数,按照中序遍历的顺序输出给定二叉树的叶结点. 函数接口定义: void InorderPrintLeaves( BiTree T); T ...

  7. python中数组切片[:,i] [i:j:k] [:-i] [i,j,:k]

    逗号","分隔各个维度,":"表示各个维度内的切片,只有:表示取这个维度的全部值,举例说明如下 1 1.二维数组 2 3 X[:,0]取所有行的第0个数据,第二 ...

  8. PE学习前的一些小知识

    位移运算 1.与运算 & 2.或运算 | 3.非运算 ~ 4.异或运算 ^ 5.移位运算 <<  >> 内存分配,文件读写 宏定义说明 一.无参数的宏定义的一般形式为: ...

  9. 解决wampserver 服务无法启动

    如图左击选中apache的httpd.conf把文本中的80端口,改成未被占用的端口.

  10. sqlserver 计算同比,环比增长

    /****** Script for SelectTopNRows command from SSMS ******/ SELECT [fdSequenceID] ,[fdInnerTime] ,[f ...