JSX语法学习（三）

目录

1. JSX 样式-style 方式

 2. JSX 样式-className 方式

 3. JSX 样式-动态 className

 4. JSX 样式-classnames 库

安装导入 classnames   文档 

认识 classnames API

1. JSX 样式-style 方式

掌握使用 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 设置类名来使用样式

知识内容：

• 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

掌握在 React 中使用 JS 原生的能力处理多个类的动态绑定

知识内容：

• 在使用 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 库来完成 className 属性值的动态绑定 

知识内容：

• 如何安装导入 classnames 库
• classnames 的 API 认识
• 使用 classnames 处理 className 属性值动态绑定

演示过程：

• 安装导入 classnames   文档 

 # 安装

npm i classnames
yarn add 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'))

• 认识 classnames API

// 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的值绑定问题