react中怎么写css样式?
2019-08-14 09:54:21来源:博客园 阅读 ()
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样式的三种方式,有什么遗漏或者不正确的地方欢迎大家指正。
原文链接:https://www.cnblogs.com/HannahFu/p/11279566.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:vue v-for 使用问题整理
下一篇:HTML之美化盒子
- DIV居中的经典方法 2020-06-13
- CSS中的float和margin的混合使用 2020-06-11
- Html/css 列表项 区分列表首尾 2020-06-11
- css与javascript重难点,学前端,基础不好一切白费! 2020-06-11
- ie8下透明度处理 2020-06-11
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash