react样式、类使用

文章参考

1. react动态添加样式：style和className
2. https://segmentfault.com/q/1010000012522905

className 引入多个类

// 三目运算，结果包含多个类
<div className={index === this.state.active ? "active title" : 'title'}>
标题
</div>

// 使用数组的join方法组合class
<div className={["container tab", index===this.state.currentIndex?"active":null].join(' ')}>此标签是否选中</div>

// 使用`${}`字符串运算
<div className={`container tab ${index===this.state.currentIndex?"active":null}`}>此标签是否选中</div>

引入css样式，设置className

css文件的内容

.sty1{//和普通CSS一样定义class选择器
    background-color: red;
    color: white;
    font-size: 40px;
}

引入css文件的用法

import './style.css';
<div className="sty1">看背景颜色和文字颜色</div>

在jsx中class改为className

JSX中的style属性应该使用“驼峰”命名

看看我的Style怎么样(整体设置Style)

<div style={{"marginLeft": "100px"}}>
	<div style={{"fontSize":"16px","lineHeight":"1.8"}}>可比克黄瓜薯片</div>
	<div style={{"lineHeight":"1.8"}}>售价：8 元</div>
	<div style={{"clear": "both"}}></div>
</div>

1. 字体的大小在html中是“font-size”，但是在jsx中，必须使用驼峰命名fontSize；其他属性类似，例如“lineHeight”、“marginLeft”
2. {{“lineHeight”:“1.8”}} 最外面的{}表示jsx的运算符，里面的{}表示是接收一个JSON对象值

style属性接收一个JSON对象

let backAndTextColor = {
    backgroundColor:'red',
    color:'white',
    fontSize:40
};
<div style={backAndTextColor}>看背景颜色和文字颜色</div>