Skip to content
{}

基础知识-组件的样式

插值

  • 插值写法 { }

如果想在标签里面 添加 变量|运算|表达式 等等 需要用到 插值写法{ } {变量|运算|表达式 }

插值写法

import React, { Component } from 'react';
import ReactDom from 'react-dom';

class App extends Component {
    render() {
        // 变量
        let MyName = '前端猛男';
        return (
            //插值写法
            <div> 
                {10 + 20}
                {MyName}
                {true?'true':'false'}
            </div>
        )
  }
}
ReactDom.render(<App/> , document.getElementById('root'))

组件的样式

  • 行内样式

React 如果想在虚拟DOM中写入样式 必须在 插值语法 里面写入一个 样式对象

import React, { Component } from 'react';
import ReactDom from 'react-dom';

class App extends Component {
    render() {
          // 样式对象 耦合属性需要驼峰命名 
        let StyleObj = {
            backgroundColor: 'red',
            fontSize:20
        }
        return (
            //需要在插值写法里面写入一个样式对象
            <div> 
                {/* 写法一 插入样式对象  行内样式*/}
                <div style={StyleObj}>插入样式对象</div>

                {/* 写法二 直接写入对象  行内样式*/}
                <div style={{ backgroundColor: '#000',color:'#fff'}}>
                     直接写入对象
                </div>
            </div>
        )
  }
}
ReactDom.render(<App/> , document.getElementById('root'))
  • 外部样式

可以将css文件导入进来 直接用样式名 注意: class名 要写成 className 应为class 已经被 Es6类关键字 暂用啦

<!-- css文件 -->
.active {
    background: blue;
}

#MyName {
    background: aqua;
}

<!-- JSX文件 -->
import React, { Component } from 'react';
import ReactDom from 'react-dom';
//导入css文件
import 'css文件路径';

class App extends Component {
    render() {
        return (
            //直接写样式名
            <div> 
                //class → className
                <div className='active'>外部样式class名</div>
                <div id='MyName'>外部样式id名</div>
            </div>
        )
  }
}
ReactDom.render(<App/> , document.getElementById('root'))

注意: class 要写成 className

见解

React推荐我们使用 行内样式 应为React觉得每个组件都是一个独立的整体

但是在开发中我们使用外部样式的机会更多 需要注意的就是 class → className (应为毕竟是在写JS代码 会受到JS的规则 他认为 class 是 关键字 (类))

<div className='active'>外部样式class名</div>

好好加油吧,少年!