本文主要讲解在react组件中如何绑定数据，绑定属性，引入图片，以及如何循环数据。
一、react如何绑定数据
在模板中（render函数返回的jsx部分）中，用{}来进行数据绑定：
import React from 'react';
class Home extends React.Component{
constructor(props){
super(props);
this.state = {
name: "react",
info: {
type: "js component",
componentName: "Home"
}
}
}
render(){
let test = "这是一个测试"
return (
<div>
<div>
I am {this.state.name} component {this.state.info.componentName}.
</div>
<br />
<div>
{test}
</div>
</div>
)
}
}
export default Home;
二、绑定属性
在react中，绑定属性和普通html有三点不同：
- class 要变成
className - for 要变成
htmlFor - style属性是
花括号里面放一个对象 - 其它属性和html用法一致
2.1 class 要变成 className
render(){
let test = "这是一个测试"
return (
<div>
<div>
I am {this.state.name} component {this.state.info.componentName}.
</div>
<br />
<div>
{test}
</div>
<br />
<div className='redTitle'>
这是一段红色的文字
</div>
</div>
)
}
如果写成class看一下会是什么效果：
<div class='redTitle'>
这是一段红色的文字
</div>
可以看到虽然页面正常显示，但是控制台会在报错。这个地方是因为class是es6的一个关键字，所以要用className来代替class。
2.2 for 要变成 htmlFor
render(){
let test = "这是一个测试"
return (
<div>
<div>
I am {this.state.name} component {this.state.info.componentName}.
</div>
<br />
<div>
{test}
</div>
<br />
<div class='redTitle'>
这是一段红色的文字
</div>
<br />
<label htmlFor="name">姓名</label>
<input id="name" />
</div>
)
}
如果任然用for，看一下会发生什么：
<label for="name">姓名</label>
<input id="name" />
发现和className类似，页面显示正常，但是控制台会报错。
2.3 style属性是花括号里面放一个对象
在这个地方，可以直接写一个对象，也可以用变量定义一个对象：
render(){
let test = "这是一个测试"
let style = {
color: "red"
};
return (
<div>
<div>
I am {this.state.name} component {this.state.info.componentName}.
</div>
<br />
<div>
{test}
</div>
<br />
<div className='redTitle'>
这是一段红色的文字
</div>
<br />
<label htmlFor="name">姓名</label>
<input id="name" />
<br />
<div style={{'color': 'red'}}>
这是style的样式1
</div>
<br />
<div style={style}>
这是style的样式2
</div>
</div>
)
}
三、导入图片
先使用html中方法尝试一下：
<img src='./../assets/images/test.jpg' />
可以看到图片并没有显示出来。
3.1 用import的方式引入本地图片
可以先把需要的图片import进来，然后在使用的地方直接引用就可以：
import testJpg from './../assets/images/test.jpg';
<img src={testJpg} />
3.2 用require引用本地图片
想到import，肯定会想到和import齐名的require，它俩的区别可以查看：js之旅（十）import/export和require/module.exports(exports)，用法如下：
<img src={require('./../assets/images/test.jpg')} />
3.3 引用网络图片
网络图片是指有完整的域名的图片，如：http://www.baidu.com/img/flexible/logo/pc/result.png
引用这类图片，直接使用html中的方式即可：
<img src ='http://www.baidu.com/img/flexible/logo/pc/result.png'/>
四、循环数据
可以使用map来实现数据的循环，返回jsx语法即可：
<ul>
{
this.state.data.map((v, k) => {
return (
<li>
{v.title}
</li>
)
})
}
</ul>
看到控制台报了一个错误：Each child in a list should have a unique "key" prop，造成这个错误的原因是：
react的key关乎到react的
dom-diff算法 react中对于dom的操作是根据生成的data-reactid进行绑定的，添加key可以保证dom结构的完整性，而不会根据react自己对dom标记的key进行重新分配 react每次决定重新渲染的时候，几乎完全是根据data-reactid来决定的，最重要的是这个机制
解决方法也很简单：在循环的每个子项添加一个key就行了
<ul>
{
this.state.data.map((v, k) => {
return (
<li key={k}>
{v.title}
</li>
)
})
}
</ul>五、本文完整代码
import React from 'react';
import testJpg from './../assets/images/test.jpg';
class Home extends React.Component{
constructor(props){
super(props);
this.state = {
name: "react",
info: {
type: "js component",
componentName: "Home"
},
data: [
{
id: 1,
title: "title1"
},
{
id: 2,
title: "title2"
}
]
}
}
render(){
let test = "这是一个测试"
let style = {
color: "red"
};
return (
<div>
<div>
I am {this.state.name} component {this.state.info.componentName}.
</div>
<br />
<div>
{test}
</div>
<br />
<div className='redTitle'>
这是一段红色的文字
</div>
<br />
<label htmlFor="name">姓名</label>
<input id="name" />
<br />
<div style={{'color': 'red'}}>
这是style的样式1
</div>
<br />
<div style={style}>
这是style的样式2
</div>
<br/>
<img src='./../assets/images/test.jpg' />
<img src={testJpg} />
<img src={require('./../assets/images/test.jpg')} />
<img src ='http://www.baidu.com/img/flexible/logo/pc/result.png'/>
<br /><br /><br /><br /><br /><br />
<ul>
{
this.state.data.map((v, k) => {
return (
<li key={k}>
{v.title}
</li>
)
})
}
</ul>
</div>
)
}
}
export default Home;
