前端猛男的博客基础知识-组件的样式
插值
- 插值写法 { }
如果想在标签里面 添加
变量|运算|表达式等等 需要用到 插值写法{ }{变量|运算|表达式 }
插值写法
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>