目录
1. JSX 样式-style 方式
知识内容：
style接受一个采用小驼峰命名属性的JavaScript对象，而不是CSS字符串style中的key采用小驼峰命名是为了与JS访问DOM节点的属性保持一致React会自动添加 ”px” 后缀到内联样式为数字的属性后，其他单位需要手动添加
演示代码：
- 需求：去掉上一个列表案例
ul的点，加上背景样式，设置字体大小，给第一个p设置两倍字体大小
import ReactDom from 'react-dom'
// 1. 数据
const list = [
{ id: 100, name: 'tom', age: 15 },
{ id: 101, name: 'jack', age: 18 },
{ id: 102, name: 'tony', age: 20 }
]
+// 2. 样式
+const styleObject = {
+ listStyle: 'none',
+ backgroundColor: 'pink',
+ fontSize: 20
+}
// 3. 使用
const element = (
+ <ul style={styleObject} >
{list.map(item => {
return (
<li key={item.id}>
+ <p style={{fontSize: '2em'}}>姓名：{item.name}</p>
<p>是否成年：{item.age > 16 ? '是' : '否'}</p>
</li>
)
})}
</ul>
)
ReactDom.render(element, document.getElementById('root'))总结：
style属性使用{ }绑定样式对象，默认px单位可以省略使用数字，一般需要动态设置属性样式使用这种方式
问题：
- 在多数情况下，应使用
className属性来引用外部CSS样式表中定义的class
2. JSX 样式-className 方式
知识内容：
className设置类名，和class属性要求一样只能是字符串- 如果需要根据数据设置类名，可以使用
{ }嵌入JS表达式实现
演示代码：
- 需求：在元素
button上根据isActive数据的值添加active类名
index.css代码：
.button {
width: 100px;
height: 40px;
border: 1px solid #eee;
color: #999;
border-radius: 4px;
display: inline-block;
text-align: center;
line-height: 40px;
box-shadow: 2px 2px 10px #ccc;
cursor: pointer;
user-select: none;
}
.button.active {
background: #069;
color: #fff;
border-color: #069;
}
.button.block {
display: block;
width: 100%;
}index.js代码：
import ReactDom from 'react-dom';
// 在src下新建index.css文件，导入进来即可
import './index.css';
const isActive = false;
const element = (
<span className={`button ${isActive ? 'active' : ''}`}>按钮</span>
);
ReactDom.render(element, document.getElementById('root'));总结： 如果只是个别类名的变化使用 className 属性嵌入 三元表达式 即可完成
思考： 如果是多个类名的变化呢？
3. JSX 样式-动态 className
知识内容：
- 在使用
className的时候遇见多个类名动态绑定，可以模仿vue使用对象的方式 vue中绑定类名的时候使用{类名:布尔}用布尔值决定是否加上这个类名
演示代码：
- 需求：在元素
button上根据isActive数据的值添加active类名，isBlock数据的值添加block类名
import ReactDom from 'react-dom';
import './index.css';
// 数据
const isActive = false;
const isBlock = false;
// 类名对象
const classObject = {
button: true,
active: isActive,
block: isBlock,
};
// 转换成字符串
const className = Object.keys(classObject)
.filter((key) => classObject[key])
.join(' ');
const element = <span className={className}>按钮</span>;
ReactDom.render(element, document.getElementById('root')); 总结： 使用 JS 原生的能力处理多个类名的动态绑定，当然这样的需求已经有 classnames 库给我们解决了
4. JSX 样式-classnames 库
知识内容：
- 如何安装导入
classnames库 classnames的API认识- 使用
classnames处理className属性值动态绑定
演示过程：
-
安装导入
classnames文档
import ReactDom from 'react-dom'
+ // 导入
+ import classNames from 'classnames'
import './index.css'
const element = (
<span className="button">按钮</span>
)
ReactDom.render(element, document.getElementById('root'))-
认识
classnamesAPI
// 1. 使用字符串
classNames('foo', 'bar'); // foo bar
// 2. 使用对象
classNames({ foo: true, bar: true }); // foo bar
// 3. 使用数组
classNames(['foo', 'bar']); // foo bar
// 4. 混合使用
classNames('foo', { bar: true }); // foo bar- 需求：在元素
button上根据isActive数据的值添加active类名，isBlock数据的值添加block类名
import ReactDom from 'react-dom';
// 1. 导入classnames
import classNames from 'classnames';
import './index.css';
// 2. 数据
const isActive = true;
const isBlock = true;
// 3. 产生类名
const className = classNames('button', {
active: isActive,
block: isBlock,
});
const element = <span className={className}>按钮</span>;
ReactDom.render(element, document.getElementById('root')); 总结： 推荐以后开发项目中使用第三方的库来解决className的值绑定问题