（五）jsx 语法规则

老怪兽

发布于 2023-02-21 21:47:28

6840

文章被收录于专栏：老怪兽的前端之旅老怪兽的前端之旅

# 🍈 一、什么是 `jsx`

jsx 全称叫做 JavaScript XML
是React 定义的一种类似于 XML 的 js 扩展语法：JS+XML
本质是 React.createElment(标签名, 标签属性, 标签体内容) 方法的语法糖

# 🍧二、什么是 `XML`

XML 早期用于存储和传输数据

<student>
    <name>TOM</name>
    <age>18</age>
</student>

# ☕三、`jsx` 语法规则

数据写死

// 创建虚拟 DOM
const VDOM = (
    <h2 id="atuguigu">
        <span>Hello,React</span>
    </h2>
)

// 渲染虚拟 DOM 到页面
ReactDOM.render(VDOM, document.getElmentById('test'))

数据写活，读取变量需要使用 {} 形式, toLowerCase() 英文大写转小写

const myId = 'aTuguigu'
const myData = 'HeLlo,rEact'

// 创建虚拟 DOM
const VDOM = (
    <h2 id="{myId.toLowerCase()}">
        <span>{myData}</span>
    </h2>
)

// 渲染虚拟 DOM 到页面
ReactDOM.render(VDOM, document.getElmentById('test'))

使用 jsx 使用 class 不能写 class 要写 className

// 创建虚拟 DOM
const VDOM = (
    <h2 className="test" id="title">Hello,React</h2>
)
// 渲染虚拟 DOM 到页面
ReactDOM.render(VDOM, document.getElmentById('test'))

使用 jsx 写内联样式

// 创建虚拟 DOM
// 这里 style 里面的第一层 {} 表示混入 js 第二层 {} 表示是 js 对象
const VDOM = (
    <h2 className="test" id="title">
        <span style={{color: 'white', fontSize: '20px'}}>Hello,React</span>
    </h2>
)
// 渲染虚拟 DOM 到页面
ReactDOM.render(VDOM, document.getElmentById('test'))

# 🍅总结：`jsx` 语法规则

定义虚拟 DOM 时，不要写引号
标签中混入 JS 表达式时要使用 {}
样式的类目指定，不能使用 class 需要使用 className
内联样式，要用 style="{{key: value, key1: value}}", 如果是像 font-size 这里的属性需要使用小驼峰的形式 fongSize
虚拟 DOM 只能有一个根标签，学过 VUE 的同学都知道，VUE 只能有一个根标签，和这里是一样的
标签必须闭合
标签首字母