react里面怎么写css(2)-木庄网络博客

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

<div id='app'></div>
class App extends React.Component{
    constructor(props){  
        super(peops)
    }
    render(){   
        return( 
     
         <div style={{color:'red'}}>hello 行间样式</div>
    
        )
    }
}
//将虚拟DOM以组件标签的形式渲染到id为'app'的真实DOM之间
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'))