斗鱼 鱼翅TV直播怎么刷鱼翅,人气粉丝,高手帮帮忙啊!

2017人阅读
React(24)
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{
将转化为:
.index_customButton_23U0x{
其中23U0x是随机数,这样转化的结果将避免最终的单页面中,css样式名不存在同名冲突。
基本上ReactJS的css文件的使用差异到此为止了,你可以按照传统Css样式的定义和使用方式,随意使用了,你可以采用单一样式、设置元素标签样式、组合样式、层级样式等任意方式。
参考知识库
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
访问:28481次
排名:千里之外
原创:31篇
阅读:1771
阅读:3224
文章:25篇
阅读:24689
(1)(2)(5)(2)(15)(4)(1)(3)

我要回帖

更多关于 斗鱼可以刷鱼翅软件 的文章

 

随机推荐