学习React(16) - 在list里使用index来做为key

在上一篇中,稍微提了一下key的用法,现在又说一下。大家都知道,在数组里,是有index来做下标的,那么想要在列表里表现出index, 那应该如何用react来表现一下呢。还是使用上一篇的Namelist.js 文件,只是这回没有用Parson.js 文件。

现在就直接上Namelist.js文件代码:

// Namelist.js 文件
import React from 'react'

function Namelist() {
    const names = ['Bruce', 'Clark', 'Diana']
    const nameList = names.map((name,index) => <h2 key={index}>{index} {name}</h2>)

    return (
        <div>
            {
                nameList
            }
        </div>
    )
}

export default Namelist

在App.js 文件里,代码如下:

// App.js 文件
import React from 'react';
import './App.css';
import Namelist from './Namelist'

function App() {
  return (
    <div className="App">
      <Namelist/>
    </div>
  );
}

export default App;

结果如下:
在这里插入图片描述


这里就稍微总结一下:
将index 做为 key的时候,什么情况下会用到呢?

  1. The items in your list do not have a unique id.
  2. The list is a static list and will not change.
  3. The list will never be reordered or filtered.

如果大家觉得不错的话,就用点赞来代替五星好评吧!

展开阅读全文

Python数据分析与挖掘

01-08
92讲视频课+16大项目实战+源码+¥800元课程礼包+讲师社群1V1答疑+社群闭门分享会=99元   为什么学习数据分析?       人工智能、大数据时代有什么技能是可以运用在各种行业的?数据分析就是。       从海量数据中获得别人看不见的信息,创业者可以通过数据分析来优化产品,营销人员可以通过数据分析改进营销策略,产品经理可以通过数据分析洞察用户习惯,金融从业者可以通过数据分析规避投资风险,程序员可以通过数据分析进一步挖掘出数据价值,它和编程一样,本质上也是一个工具,通过数据来对现实事物进行分析和识别的能力。不管你从事什么行业,掌握了数据分析能力,往往在其岗位上更有竞争力。    本课程共包含五大模块: 一、先导篇: 通过分析数据分析师的一天,让学员了解全面了解成为一个数据分析师的所有必修功法,对数据分析师不在迷惑。   二、基础篇: 围绕Python基础语法介绍、数据预处理、数据可视化以及数据分析与挖掘......这些核心技能模块展开,帮助你快速而全面的掌握和了解成为一个数据分析师的所有必修功法。   三、数据采集篇: 通过网络爬虫实战解决数据分析的必经之路:数据从何来的问题,讲解常见的爬虫套路并利用三大实战帮助学员扎实数据采集能力,避免没有数据可分析的尴尬。   四、分析工具篇: 讲解数据分析避不开的科学计算库Numpy、数据分析工具Pandas及常见可视化工具Matplotlib。   五、算法篇: 算法是数据分析的精华,课程精选10大算法,包括分类、聚类、预测3大类型,每个算法都从原理和案例两个角度学习,让你不仅能用起来,了解原理,还能知道为什么这么做。
©️2020 CSDN 皮肤主题: 终极编程指南 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值