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繫結在提取的元件上，就不會有報錯了。