React实战-ReactJs与传统Web页面中Css的使用差异
2016-09-28 21:48
316 查看
React实战-ReactJs与传统Web页面中Css的使用差异
网页的布局、颜色、形状等UI展示方式主要是由Css进行设置,在ReactJs中也是一样。ReactJs中的Css结构方式与传统的Web网页类似,但依然存在一些差异。ReactJs中Css文件本身的编写上并没有差异,我们可以定义特定的样式类名,也可以正对Html元素定义样式。差异主要在React对Css的使用上(微信react-javascript):
l 引用的差异:
传统html文件中css文件引用方式:
<link rel="stylesheet" type="text/css" href="mystyle.css">
ReactJs中css文件引用方式:
你可以直接采用require: require('./Category.css');
你也可以采用import: import styles from './Category.css';
l 使用差异:
传统css的使用方式是设置class: <div class=”center”> test </div>
ReactJs中css的使用方式是设置className(因为class已经成为了关键字)。
<div className='entry'>test </div>
另外
如果你采用require的方式,你可以直接在页面元素中使用css文件中的样式名。
如果你采用import styles from './Category.css';的方式,则应采用以下方式。
<div className={style.entry}>test </div>
l 最终解析文件的差异:
传统css文件一般依然保持着源码状态。
在ReactJS中,Css文件最终将会对css样式名进行转换,例如在index.js文件中,引用style.css:
.customButton{
Width:100px;
Heigth:30px;
}
将转化为:
.index_customButton_23U0x{
Width:100px;
Heigth:30px;
}.
其中23U0x是随机数,这样转化的结果将避免最终的单页面中,css样式名不存在同名冲突。
基本上ReactJS的css文件的使用差异到此为止了,你可以按照传统Css样式的定义和使用方式,随意使用了,你可以采用单一样式、设置元素标签样式、组合样式、层级样式等任意方式。
网页的布局、颜色、形状等UI展示方式主要是由Css进行设置,在ReactJs中也是一样。ReactJs中的Css结构方式与传统的Web网页类似,但依然存在一些差异。ReactJs中Css文件本身的编写上并没有差异,我们可以定义特定的样式类名,也可以正对Html元素定义样式。差异主要在React对Css的使用上(微信react-javascript):
l 引用的差异:
传统html文件中css文件引用方式:
<link rel="stylesheet" type="text/css" href="mystyle.css">
ReactJs中css文件引用方式:
你可以直接采用require: require('./Category.css');
你也可以采用import: import styles from './Category.css';
l 使用差异:
传统css的使用方式是设置class: <div class=”center”> test </div>
ReactJs中css的使用方式是设置className(因为class已经成为了关键字)。
<div className='entry'>test </div>
另外
如果你采用require的方式,你可以直接在页面元素中使用css文件中的样式名。
如果你采用import styles from './Category.css';的方式,则应采用以下方式。
<div className={style.entry}>test </div>
l 最终解析文件的差异:
传统css文件一般依然保持着源码状态。
在ReactJS中,Css文件最终将会对css样式名进行转换,例如在index.js文件中,引用style.css:
.customButton{
Width:100px;
Heigth:30px;
}
将转化为:
.index_customButton_23U0x{
Width:100px;
Heigth:30px;
}.
其中23U0x是随机数,这样转化的结果将避免最终的单页面中,css样式名不存在同名冲突。
基本上ReactJS的css文件的使用差异到此为止了,你可以按照传统Css样式的定义和使用方式,随意使用了,你可以采用单一样式、设置元素标签样式、组合样式、层级样式等任意方式。
相关文章推荐
- X5的UI部分和传统Web页面开发的差异
- 使用webpack、babel、react、antdesign配置单页面应用开发环境
- React实战-Reactjs中的如何通过不可变数据对象提高页面性能
- 移动Web实战篇-使用CSS Sprites减少你的页面http请求
- 使用React和webpack工具实现自己的博客页面
- react 初探:webpack 加载css 使用配置
- react&webpack使用css、less && 安装原则 --- 从根本上解决问题。
- 在移动Web页面中使用CSS固定页脚
- webview 中使用css适配简单的页面
- react&webpack使用css、less && 安装原则 --- 从根本上解决问题。
- react_native 项目实战 (5) DeviceEventEmitter 使用 ,webview 使用 react navigation进行参数传递
- 调试实战:判断Liferay中编辑WebContent 时使用何种富文本编辑器分析 ,顺便分享下页面调试经验 推荐
- react-native 使用webview调用自己书写的页面
- react_native 项目实战 (6) 趋势页面 列表抽取 popover使用
- webview 中使用css适配简单的页面
- X5的UI部分和传统Web页面开发的差异
- webpack---使用插件,常见webpack的plugin,构建vue,react单页面/多页面工程APP必备插件
- react_native 项目实战 (3) 使用导航页面跳转 (ReactNaviation 完全自定义导航)
- 在WEB页面中使用Windows Control可行不?
- 在页面中直接设计TreeView的节点而不使用Web.Sitemap文件在运行时出错