React教程之样式和图片加载问题详解
1、样式
样式是一个界面的展示问题的核心，在样式方面，react和一般的web网页的区别还是挺大的。
第一、在react中，不使用class属性来添加样式，而是使用className属性。
第二、在react中，它的内联对象是使用对象的方式来表达的，而一般的web网页的内联样式，是一个字符串。
示例如下：
//css
.colorRed{
color: red;
}
//render函数中
render(){
return (
<p style={{background:'#000'}} className='colorRed'>
mapbar_front
</p>
)
}
在这里，我们需要注意一个重要的点。style后面有两个大括号（外层大括号和内层大括号），外层大括号代表jsx语法，表示里面的东西要使用js的方式进行解析，而内层大括号代表了对象，就是使用了一个对象来表达样式。
关于对象的方式，我们可以写成下面的方式：
var styleObj = {
width: '200px',
height: '150px',
color: 'red'
}
render(){
return (
<p style={styleObj} className='colorRed'>
mapbar_front
</p>
)
}
2、图片
在react中，加载图片分为两种，一种是本地图片的加载，一种是网络图片的加载。
网络图片的加载
网络图片的加载，和一般的dom元素没有区别：
render(){
return (
<p>
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1608431072,669449145&fm=27&gp=0.jpg" />
</p>
)
}
但是呢，图片一般是后台传过来的变量，我们一般用在jsx语法的{}中来表示。
//如果有一个src的state。
render(){
return (
<p>
<img src={this.state.src} />
</p>
)
}
本地图片的加载
本地图片的加载的第一种方式——require
render(){
return <p>
<img src={require('../assets/logo.png')} />
</p>
}
另一种方式就是import。
import img from '../assets/logo.png';
//render函数中
render(){
return (
<img src={img} />
)
}
//样式总结
方式 写法
className <p className='box'></p>
对象 <p style={{color: 'red'}}></p>
//图像显示问题总结
方式 写法
本地图片 <img src={require('../assets/logo.png')} />
网络图片 <img src={this.state.src} />