React-循环的使用

导语：在开发过程中，使用循环可以大大提高我们的开发效率。本节内容我们将介绍在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中动态修改样式。感谢大家的关注！