JSX基本语法中关于react如何写css样式主要有三种方法

 

　　1、基于class--（className）

 

　　基于className,通过className在style中给该class名的DOM元素添加样式

 

　　1<style>

 

　　2.title{

 

　　3color:blue;

 

　　4}

 

　　5</style>

 

　　6

 

　　7

 

　　8<divid='app'></div>

 

　　9//创建一个叫App类，继承（extends)了react中创建组件的方法(component)

 

　　10classAppextendsReact.Component{

 

　　11constructor(props){

 

　　12super(peops)

 

　　13}

 

　　14render(){//类里面负责构建HTML的位置，render渲染

 

　　15return(//返回HTML结构

 

　　16<divclassName="title">高版本</div>

 

　　17

 

　　18)

 

　　19}

 

　　20}

 

　　21

 

　　22//将虚拟DOM以组件标签的形式渲染到id为'app'的真实DOM之间

 

　　23ReactDOM.render(<App/>,document.getElementById('app'))

 

　　2、基于innercss（facebook主张的方式）行间样式(json)

 

　　Facebook主张的是行间样式，直接给对应的DOM元素添加style属性，遵循react的规则，写在{}当中。

 

　　1<divid='app'></div>

 

　　2

 

　　3classAppextendsReact.Component{

 

　　4constructor(props){

 

　　5super(peops)

 

　　6}

 

　　7render(){

 

　　8return(

 

　　9

 

　　10<divstyle={{color:'red'}}>hello行间样式</div>

 

　　11

 

　　12)

 

　　13}

 

　　14}

 

　　15

 

　　16//将虚拟DOM以组件标签的形式渲染到id为'app'的真实DOM之间

 

　　17ReactDOM.render(<App/>,document.getElementById('app'))

 

　　3、原型链和全局变量

 

　　可以通过定义全局变量的方法来定义一个css样式，适用该样式的DOM元素可直接调用。

 

　　原型链中需要注意添加样式的位置，调用时通过this，this指向该组件

 

　　<divid='app'></div>

 

　　//全局样式方法

 

　　varcolor={color:'red'}

 

　　classAppextendsReact.Component{

 

　　constructor(props){

 

　　super(peops)

 

　　}

 

　　render(){

 

　　return(

 

　　<divstyle={color}>react全局行间样式</div>

 

　　//this指向组件本身

 

　　<divstyle={this.col}>原型样式</div>

 

　　)

 

　　}

 

　　}

 

　　//原型链样式的写法，在创建完以及渲染中间的位置添加原型上的样式

 

　　App.prototype.col={

 

　　color:pink

 

　　}

 

　　//将虚拟DOM以组件标签的形式渲染到id为'app'的真实DOM之间

 

　　ReactDOM.render(<App/>,document.getElementById('app'))

 

　　以上是react中写css样式的三种方式，有什么遗漏或者不正确的地方欢迎大家指正。