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 单位可以省略使用数字，