码迷,mamicode.com
首页 > 其他好文 > 详细

列表和键

时间:2020-03-22 01:06:05      阅读:69      评论:0      收藏:0      [点我收藏+]

标签:重复   没有   元素   列表项   exp   ext   字符串   怎么   div   

1,在 JavaScript 中 怎么转换列表?

    技术图片

   我们使用 map() 函数使 numbers 数组中的元素值翻倍,将 map() 返回的新数组分配给变量 doubled

2,React中,转换数组为元素列表的方式,和上述方法基本相同

import React, { Component } from ‘react‘;

export default class App extends Component {

    render() {
        const numbers =[1,2,3,4,5]
        const listItems=numbers.map((number)=><li>{number}</li>)
        return (
            <div>
               <ul>{listItems}</ul>
            </div>
        )
       
    }
}

技术图片

 

注意,运行上面的代码的时候,将会受到一个警告:a key should be provided for list items(应该为列表元素提供一个键)。当创建元素列表时,“key” 是一个你需要包含的特殊字符串属性。

我们在 numbers.map( ) 中赋值一个 key 给我们的列表元素,解决丢失 key 的问题。

技术图片

 

 3,键(keys ) :

   ①键帮助React 标识 哪个项 被修改,添加或者移除了,数组中的每一个元素都应该有一个唯一不变的键来标识

   ② 挑选 key 最好的方式是使用一个在它的同辈元素中不重复的标识字符串,多数情况可以使用数据中的 id 作为 keys

  const todos = todos.map( (todo) => <li  key = { todo.id }> { todo.text } </li>  ) ;

   ③当要渲染的列表项中没有稳定的 id 时,可以使用数据项的索引值作为 key 

  const todos = todos.map( todo , index ) => <li  key = { index } > { todo. text } </li>

   ④如果列表项的顺序可能发生改变,不建议使用索引作为 keys

   ⑤ keys 只在数组的上下文中存在意义。例如,如果你提取一个 ListItem 组件,应该把 key 放置在数组处理的 <ListItem /> 元素中,不能放在 ListItem 组件自身 的 <li></li> 元素上。

   app.jsx

    技术图片

 

   numberlist.jsx

    技术图片

   listitem.jsx

    技术图片

 

   ⑥键是React的一个内部映射,但其不会传递给组件的内部。如果你需要在组件中使用相同的值,可以明确使用一个不同名字的 prop 传入。

    技术图片

 

   

 

 

 

 

 

    

列表和键

标签:重复   没有   元素   列表项   exp   ext   字符串   怎么   div   

原文地址:https://www.cnblogs.com/shanlu0000/p/12543459.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!