一個例子
有這樣的一個場景如下圖所示,有一組動態(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>}
首先說明的是,若頁面中數(shù)組內(nèi)容是固定而不是動態(tài)的話,上面的代碼也不會有什么問題(??ˇ?ˇ?? 但是這不是推薦的做法)。