react之列表&key
阿新 • • 發佈:2020-07-21
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繫結在提取的元件上,就不會有報錯了。