分類導(dǎo)航

React之key詳解

發(fā)布時(shí)間：2017年05月10日作者： IT網(wǎng)絡(luò)文摘 (該文來(lái)自筆記，點(diǎn)擊查看原文)

有這樣的一個(gè)場(chǎng)景如下圖所示，有一組動(dòng)態(tài)數(shù)量的input，可以增加和刪除和重新排序，數(shù)組元素生成的組件用index作為key的值，例如下圖生成的ui展示：

電腦培訓(xùn),計(jì)算機(jī)培訓(xùn),平面設(shè)計(jì)培訓(xùn),網(wǎng)頁(yè)設(shè)計(jì)培訓(xùn),美工培訓(xùn),Web培訓(xùn),Web前端開發(fā)培訓(xùn)

上面例子中的input組件渲染的代碼如下所示，全部完整代碼可以參考 ==>完整code。

{this.state.data.map((v,idx)=><Item key={idx} v={v} />)}//Item組件render方法render(){   return <li>{this.props.v} <input type="text"/></li>}

首先說(shuō)明的是，若頁(yè)面中數(shù)組內(nèi)容是固定而不是動(dòng)態(tài)的話，上面的代碼也不會(huì)有什么問(wèn)題(??ˇ?ˇ?? 但是這不是推薦的做法)。