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

刺骨的言语ヽ痛彻心扉 2022-12-26 04:52 160阅读 0赞

### 一、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
    
    }