您的位置：首页 > Web前端 > React

React教程（三）——样式和图片加载问题

2018-03-13 21:43 435 查看

1、样式

样式是一个界面的展示问题的核心，在样式方面，react和一般的web网页的区别还是挺大的。

第一、在react中，不使用class属性来添加样式，而是使用className属性。

第二、在react中，它的内联对象是使用对象的方式来表达的，而一般的web网页的内联样式，是一个字符串。

示例如下：

//css
.colorRed{
color: red;
}
//render函数中
render(){
return (
<div style={{background:'#000'}} className='colorRed'>
mapbar_front
</div>
)
}

在这里，我们需要注意一个重要的点。style后面有两个大括号（外层大括号和内层大括号），外层大括号代表jsx语法，表示里面的东西要使用js的方式进行解析，而内层大括号代表了对象，就是使用了一个对象来表达样式。

关于对象的方式，我们可以写成下面的方式：

var styleObj = {
width: '200px',
height: '150px',
color: 'red'
}
render(){
return (
<div style={styleObj} className='colorRed'>
mapbar_front
</div>
)
}

2、图片

在react中，加载图片分为两种，一种是本地图片的加载，一种是网络图片的加载。

网络图片的加载

网络图片的加载，和一般的dom元素没有区别：

render(){
return (
<div>
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1608431072,669449145&fm=27&gp=0.jpg" />
</div>
)
}

但是呢，图片一般是后台传过来的变量，我们一般用在jsx语法的{}中来表示。

//如果有一个src的state。
render(){
return (
<div>
<img src={this.state.src} />
</div>
)
}

本地图片的加载

本地图片的加载的第一种方式——require

render(){
return <div>
<img src={require('../assets/logo.png')} />
</div>
}

另一种方式就是import。

import img from '../assets/logo.png';
//render函数中
render(){
return (
<img src={img} />
)
}

//样式总结


方式	写法
className	<div className='box'></div>
对象	<div style={{color: 'red'}}></div>

//图像显示问题总结


方式	写法
本地图片	<img src={require('../assets/logo.png')} />
网络图片	<img src={this.state.src} />

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航