react学习经验总结（style和class的处理）

一、style 可以使用对象

JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中 包括注释

声明一个对象：

var headerStyle={

backgroundColor:"red",

color:"green"

}

将style对象进行引入{}不能丢失：

class Header extends React.Component{

render(){

return (<div>

<h1 style={headerStyle}>{this.props.title}</h1>

</div>)

}

}

:style="对象" 同class的设置

:style="[内联样式对象1,内联样式对象2]"

eg:

第一种方法：

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">hello react</div>

data: {

activeColor: 'green',

fontSize: 30

}

 

第二种方法：

<div v-bind:style="styleObject">hello react</div>

data: {

styleObject: {

color: 'green',

fontSize: '30px'

}

}

第三种方法：

<div v-bind:style="[baseStyles, overridingStyles]">hello react</div>

data: {

baseStyles: {

color: 'green',

fontSize: '30px'

},

overridingStyles: {

'font-weight': 'bold'

}

}

二、样式(class)

定义 随便建立一个common.css的样式表，写入

.sty1{

background-color: red;

color: white;

font-size: 40px;

}

• 外部引入

import React from "react";

import {render} from "react-dom";

import './common.css';

• 直接使用

class Footer extends React.Component{

render(){

return (<div>

<h3 className="sty1">{this.props.title}</h3>

</div>)

}

}

:class="{red:flag}" flag为true red样式生效 否则不生效

:class=[flag:"class1":"class2"] class1和class2中均需要在data中声明

:class="对象" 对象为data中的属性名称 是一个对象 样式的操作就变成了对象的操作 利用数据自动渲染

eg:

样式写入：a{color:green} b{color:red}

第一种方法：

html部分：<span v-bind:class="{a:isexit}"



js部分：data:{isexit：true}

第二种方法：
 

html部分：<span v-bind:class="inclass"></span> /<span v-bind:class="[inclass]"></span>



js部分：data:{inclass:"a"}

第三种方法：

html部分：<span v-bind:class="[danger?iserror:issucess]""></span>



js部分：data:{

danger:true,

iserror:b,

issucess:a

}