react之列表&key
react列表
渲染多个组件
import React,{Component} from 'react'
function NumberList () {
const numbers = [1,2,3,4,5]
const listItems = numbers.map(number => <li key={number.toString()}>{number*2}</li> )
return (<ul>{listItems}</ul>)
}
function ListItem (props) {
const value = props.value
return(
<li >{value}</li>
)
}
function NumberList1 (props) {
const numbers = props.numbers
const listItems = numbers.map(number => <ListItem value={number} key={number.toString()}></ListItem>)
return (
<ul>
{listItems}
</ul>
)
}
export default class List extends Component{
render(){
return (
<div>
<h1>react列表&key</h1>
<NumberList1 numbers={[1,2,3,4,5]}></NumberList1>
</div>
)
}
}
经过上述代码执行,可以知道如果将key的值放在li上,或者不给key值,控制台会报错,当给了key值并且将key绑定在提取的组件上,就不会有报错了。