使用 map() 方法遍历数组生成了一个 1 到 5 的数字列表
import React,{ Component } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import PropTypes from 'prop-types';
const arr=[1,2,3,4,5];
const items=arr.map(val=>
<li>{val}</li>
)
ReactDOM.render(
<div>
<ul>
{items}
</ul>
</div>,document.getElementById('example')
);
serviceWorker.unregister();
将以上实例重构成一个组件，组件接收数组参数，每个列表元素分配一个 key
不然会出现警告 a key should be provided for list items，意思就是需要包含 key
import React,1)">; function NumList(props){ const arr=props.arr; const items=arr.map(val=> <li key={val.toString()}>{val}</li> ) return( <ul>{items}</ul> ) } const arr=[11,22,33]; ReactDOM.render( <div> <NumList arr={arr}/> </div>,1)">) ); serviceWorker.unregister();
Keys 可以在 DOM 中的某些元素被增加或删除的时候帮助 React 识别哪些元素发生了变化
一个元素的 key 最好是这个元素在列表中拥有的一个独一无二的字符串。通常使用来自数据的 id 作为元素的 key
当元素没有确定的 id 时，可以使用序列号索引 index 作为 key
如果列表可以重新排序，不建议使用索引来进行排序，因为这会导致渲染变得很慢
数组元素中使用的 key 在其兄弟之间应该是独一无二的。
然而，它们不需要是全局唯一的。当生成两个不同的数组时，可以使用相同的键。
import React,1)"> Blogs(props){
const left=(
<ul>
{
props.posts.map(val=>
<li key={val.id}>{val.title}</li>
)
}
</ul>
)
const right=props.posts.map(val=>
<div key={val.id}>
<h3>{val.title}</h3>
<p>{val.content}</p>
</div>
(
<div>
{left}
<hr/>
{right}
</div>
)
}
const posts=[
{id:1,title:'title1',content:'content1'},{id:2,title:'title2',content:'content2'}
];
ReactDOM.render(
<div>
<Blogs posts={posts}/>
</div>,1)">)
);
serviceWorker.unregister();
key 会作为给 React 的提示，但不会传递给组件。
如果组件中需要使用和 key 相同的值，需要作为属性传递
const content = posts.map((post) => <Post key={post.id} id={post.id} title={post.title} /> );
JSX 允许在大括号中嵌入任何表达式
import React,1)"> NumList(props){
const list=props.list;
{list.map(val=>
<li key={val.toString()}>{val}</li>
)}
</ul>
)
}
const lists=['a','b','c'];
ReactDOM.render(
<div>
<NumList list={lists}/>
</div>,1)">)
);
serviceWorker.unregister();
