一個(gè)例子

有這樣的一個(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)題(??ˇ?ˇ?? 但是這不是推薦的做法)。

網(wǎng)友評(píng)論