在上一篇中,稍微提了一下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的时候,什么情况下会用到呢?
- The items in your list do not have a unique id.
- The list is a static list and will not change.
- The list will never be reordered or filtered.
如果大家觉得不错的话,就用点赞来代替五星好评吧!