一个例子

有这样的一个场景如下图所示,有一组动态数量的input,可以增加和删除和重新排序,数组元素生成的组件用index作为key的值,例如下图生成的ui展示:

电脑培训,计算机培训,平面设计培训,网页设计培训,美工培训,Web培训,Web前端开发培训

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

首先说明的是,若页面中数组内容是固定而不是动态的话,上面的代码也不会有什么问题(??ˇ?ˇ?? 但是这不是推荐的做法)。

网友评论