<!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. 测试平台系列(5) 引入Ant Design Pro

    引入Ant Design Pro 回顾 还是继续回顾下之前的作业, 返回的中文变成了ascii字符,不要紧,我们光荣地百度一哈. 随便点进去看看,都可以找到正确答案: 可以看到,我们需要修改confi ...

  2. Linux下查看文件内容的几种常用命令

    [常用] 1,cat     由第一行开始显示内容,并将所有内容输出 cat的功能是将文件从第一行开始连续的将内容输出在屏幕上.但是cat并不常用,原因是当文件大,行数比较多时,屏幕无法全部容下时,只 ...

  3. 漫漫Java路1—基础知识—初涉java

    前言 主学信息安全,在编程的路上还是一个孩子,还在一步一步探索,有些东西可能是站在自己的位置思考的,很可能会出现一些啼笑皆非的错误,如果有误,还希望各位斧正. Java安装 jdk的安装 甲骨文官网选 ...

  4. 鸿蒙OS前端开发入门指南：网络图片_Image渲染网络图片

    目录: 1.开启明文传输 2.权限申请 3.引入http插件 4.案例展示 5.<鸿蒙OS前端开发入门指南>文章合集 开启明文传输 在config.json配置文件添加如下配置(如果不开启 ...

  5. 安全框架Drozer安装和简单使用

    安全框架Drozer安装和简单使用 说明: drozer(即以前的Mercury)是一个开源的Android安全测试框架 drozer不是什么新工具,但确实很实用,网上的资料教程都很多了,最近自己项目 ...

  6. python 画图中文显示问题

    在python文件当前目录下添加simsun.ttc(资源网上下载即可,有很多) 代码如下: plt.title("标题", fontproperties='SimHei', si ...

  7. Nacos 2.0 正式发布，性能提升了 10 倍！！

    前不久,在3月20号,Nacos 2.0.0 正式发布了!我简单看了下官方的介绍,可能nacos未来逐渐会成为各大公司作为服务治理和配置中心的主要中间件. Nacos 简介:一个更易于构建云原生应用的 ...

  8. [树形DP]电子眼

    电 子 眼 电子眼 电子眼 题目描述 中山市石一个环境优美.气候宜人的小城市.因为城市的交通并不繁忙,市内的道路网很稀疏.准确地说,中山市有N-1条马路和N个路口,每条马路连接两个路口,每两个路口之间 ...

  9. vuejs集成echarts的一些问题

    最近在做Beetlex的数据分析平台,在开发这个产品过程中涉及到大量的数据图表展示功能:由于产品前端使用的是vuejs开发,所以在集成echarts或多或少会碰到一些问题,在这里主要讲解一下碰到的问题 ...

  10. Chrome最新0day RCE（2021/4/13）

    关于Chrome Chrome就是Google浏览器... POC Git链接 https://github.com/r4j0x00/exploits/tree/master/chrome-0day ...