react中怎么写css样式?
程序员文章站
2022-03-14 13:45:03
JSX基本语法中关于react如何写css样式主要有三种方法 1、基于class --(className) 基于className ,通过className在style中给该class名的DOM元素添加样式 2、基于inner css (facebook 主张的方式) 行间样式(json) Fac ......
jsx基本语法中关于react如何写css样式主要有三种方法
1、基于class --(classname)
基于classname ,通过classname在style中给该class名的dom元素添加样式
1 <style> 2 .title{ 3 color:blue; 4 } 5 </style> 6 7 8 <div id='app'></div> 9 //创建一个叫app类,继承(extends)了react中创建组件的方法(component) 10 class app extends react.component{ 11 constructor(props){ 12 super(peops) 13 } 14 render(){ //类里面负责构建html的位置,render渲染 15 return( //返回html结构 16 <div classname="title">高版本</div> 17 18 ) 19 } 20 } 21 22 //将虚拟dom以组件标签的形式渲染到id为'app'的真实dom之间 23 reactdom.render(<app/>,document.getelementbyid('app'))
2、基于inner css (facebook 主张的方式) 行间样式(json)
facebook主张的是行间样式,直接给对应的dom元素添加style属性,遵循react的规则,写在{ }当中。
1 <div id='app'></div> 2 3 class app extends react.component{ 4 constructor(props){ 5 super(peops) 6 } 7 render(){ 8 return( 9 10 <div style={{color:'red'}}>hello 行间样式</div> 11 12 ) 13 } 14 } 15 16 //将虚拟dom以组件标签的形式渲染到id为'app'的真实dom之间 17 reactdom.render(<app/>,document.getelementbyid('app'))
3、原型链和全局变量
可以通过定义全局变量的方法来定义一个css样式,适用该样式的dom元素可直接调用。
原型链中需要注意添加样式的位置,调用时通过this,this指向该组件
<div id='app'></div> //全局样式方法 var color={color:'red'} class app extends react.component{ constructor(props){ super(peops) } render(){ return( <div style={color}>react全局行间样式</div> //this 指向组件本身 <div style={this.col}>原型样式</div> ) } } //原型链样式的写法,在创建完以及渲染中间的位置添加原型上的样式 app.prototype.col={ color:pink } //将虚拟dom以组件标签的形式渲染到id为'app'的真实dom之间 reactdom.render(<app/>,document.getelementbyid('app'))
以上是react中写css样式的三种方式,有什么遗漏或者不正确的地方欢迎大家指正。
推荐阅读
-
怎么控制页面中某个元素的滚动_html/css_WEB-ITnose
-
submit后,html中的select 怎么还是原来的值_html/css_WEB-ITnose
-
应该怎样进一步学习写样式_html/css_WEB-ITnose
-
一个纯CSS写的登录的样式_html/css_WEB-ITnose
-
如果当前cookie中的值为0 某些div不显示 怎么写
-
css3中检验表单的required,focus,valid和invalid样式
-
不知大家遇到过这种问题么,一个层宽度设为100%,并设置背景图片,在浏览器中浏览,缩小窗口到滚动条出现,然后拖动滚动条到右侧,右侧的区域变成空白,怎么解决?_html/css_WEB-ITnose
-
a标签加上CSS样式后 onclick事件不执行,怎么办- -。_html/css_WEB-ITnose
-
html中播放swf文件,怎么显示下面的开关面板的部分?_html/css_WEB-ITnose
-
前端工程师简历中的项目经验怎么写