react中怎么写css样式？

残雨斜阳 發表於 2019-7-31 22:27:00

<h2>JSX基本语法中关于react如何写css样式主要有三种方法</h2>
<h3>1、基于class --（className）</h3>
基于className ,通过className在style中给该class名的DOM元素添加样式
<div class="cnblogs_code">
<pre> 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 <divclassName="title">高版本</div>
17
18 )
19 }
20 }
21
22 //将虚拟DOM以组件标签的形式渲染到id为'app'的真实DOM之间
23 ReactDOM.render(<App/>,document.getElementById('app'))</pre>
</div>
<h3>2、基于inner css （facebook 主张的方式）行间样式(json)</h3>
Facebook主张的是行间样式，直接给对应的DOM元素添加style属性，遵循react的规则，写在{  }当中。
<div class="cnblogs_code">
<pre> 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'))</pre>
</div>
<h3>3、原型链和全局变量</h3>
可以通过定义全局变量的方法来定义一个css样式，适用该样式的DOM元素可直接调用。
原型链中需要注意添加样式的位置，调用时通过this，this指向该组件
<div class="cnblogs_code">
<pre><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'))</pre>
</div>
以上是react中写css样式的三种方式，有什么遗漏或者不正确的地方欢迎大家指正。 
来源：https://www.cnblogs.com/HannahFu/p/11279566.html

頁: [1]

琼殿技术论坛's Archiver

react中怎么写css样式？