在react中我们可以实现数据的绑定。可以绑定组件的属性数据、样式数据等，通过绑定后它们的显示效果和之前直接写在代码中相比并无差异，只是实现了代码和数据的分离，如下图：
下面来看一下具体的实现方式。
一、绑定数据
1 绑定数据
绑定的数据我们一般要放在构造函数中，如下：
通过this.state定义我们要绑定的数据，然后在组件的属性值位置我们可以通过用花括号来实现属性数据的绑定，同时，我们也实现了组件value值的绑定。
2 绑定样式
在react中定义样式要使用className属性，这是因为class已经是一个关键字了，所以在JSX语法中是不能用class来定义样式的，如图：
同时，我们也可以用行内样式，但是style的写法也跟我们传统的HTML中的写法略有不同，如图：
3 for关键字变更为htmlFor，如图：
以上是在react中实现的数据绑定操作。
注意：
除此之外，其他的写法和之前相同。
二、引入图片
react中模块添加图片时，如果按照之前的写法<img src="图片路径" />是添加不了图片的，在react中添加图片需要使用模块化的方法添加。下面是具体的操作方法：
1 首先在文件开头像引入react模块一样引入图片，如图：
2 然后将<img>标签中的src属性值用数据绑定的方法写，如图：
3 至此，图片添加成功，如图：
上述步骤是引入的本地图片，如果引用网络图片的话写法跟之前的写法一致，src属性值直接等于网络地址即可，如图：
注意：添加本地图片时也可以用ES5的写法添加，如下所示：
三、数组循环
在react中组件的构造函数里定义一个数组，我们可以通过循环将它的值渲染到前端页面上，如下所示：
1 首先在构造函数里定义一个名为list01数组，如图：
2 然后在模块定义里通过使用数组的map方法将它渲染到前端页面，如下：
3 效果如图：
上述通过map来获取数组值并将其渲染到前端页面的操作也可以在模版定义里面直接写，如下：
注意：循环数组时一定要记得给每一项增加一个key值，这个key是唯一的。