导语:在开发过程中,使用循环可以大大提高我们的开发效率。本节内容我们将介绍在React中如何使用循环进行渲染。
首先,来看一下当前我们的项目效果图:
我们在当前所定义页面时,一共写了四次Person组件,代码比较冗余,效率也比较低。接下来我们将上面冗余代码优化为循环的形式,具体代码定义如下:
{
return
})
}
查看页面,这是展示并没有问题,但是打开控制台,会看到如下报错信息:
上述信息提示我们要拥有一个唯一的key值。原因在于React要给虚拟dom提供唯一标识,根据key值能够更快速的匹配更改。在实际开发中我们会有id属性进行设置,这里我们使用index进行标识:
key={index}>
截止到这里我们就实现了循环渲染。接下来我们希望通过循环添加事件。具体实现功能为:在每个Person组件进行输入内容时,name值实时更新为输入的数据。
首先Person.js中定义change事件
然后,在App.js中循环绑定事件
return
name={person.name}
age={person.age}
key={index}
changed=
>
})
最后,实现valueChangeHandler方法
valueChangeHandler= (index,event)=>{
this.setState({
person:persons
})
}
查看效果:
结语:下节内容我们将介绍在React中动态修改样式。感谢大家的关注!
领取专属 10元无门槛券
私享最新 技术干货