一個例子

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

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

上面例子中的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>}

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

網(wǎng)友評論