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绑定在提取的组件上，就不会有报错了。