一個(gè)例子
有這樣的一個(gè)場(chǎng)景如下圖所示,有一組動(dòng)態(tài)數(shù)量的input,可以增加和刪除和重新排序,數(shù)組元素生成的組件用index
作為key的值,例如下圖生成的ui展示:
上面例子中的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)題(??ˇ?ˇ?? 但是這不是推薦的做法)。