如下所示,使用map()
函数让数组中的每一项变成双倍,从而得到了一个新的数组对象。
> const numbers = [1, 2, 3, 4, 5]; > const doubled = numbers.map((number) => number * 2); > doubled [2, 4, 6, 8, 10]
在React中,把数组转化为元素列表,也是类似上述过程。
将map()
函数与JSX组合使用,即可批量渲染:
const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((number) => <li>{number}</li> ); ReactDOM.render( <ul>{listItems}</ul>, document.getElementById('root') );
通过组件的方式来实现上述功能,且接收指定数组作为参数,从而使组件的复用度更高:
function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((number) => <li>{number}</li> ); return ( <ul>{listItems}</ul> ); } const numbers = [1, 2, 3, 4, 5]; ReactDOM.render( <NumberList numbers={numbers} />, document.getElementById('root') );
React元素中包含一个特殊的key
属性,主要是用来标记元素,让React定位指定元素而用的。如下所示,为每一个列表元素分配一个key属性:
function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((number) => <li key={number.toString()}> {number} </li> ); return ( <ul>{listItems}</ul> ); } const numbers = [1, 2, 3, 4, 5]; ReactDOM.render( <NumberList numbers={numbers} />, document.getElementById('root') );
如下所示,也效果相同,但是拆分得更细:
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') );
React元素同一个列表中元素的每个key必须是独一无二的字符串;但是key只是在兄弟节点之间是必须独一无二的,不同列表的元素的key是可以重复的。