当前位置：首页 > news >正文

【02】基础知识：React - jsx语法规则

news 2025/7/2 2:33:12

一、jsx 简介

全称为JavaScript XML，是 react 定义的一种类似于 XML 的 JS 扩展语法

JS + XML 本质是 React.createElement(component, props, …children) 方法的语法糖，用来简化创建虚拟 DOM

写法：var ele = <h1>Hello JSX!</h1>注意：
它不是字符串，也不是 HTML/XML 标签
它最终产生的就是一个 JS 对象

二、jsx 语法规则

1、定义虚拟 DOM 时，不要写引号

2、标签中混入JS表达式时要用 {}

3、样式的类名指定不要用 class，要用 className

4、内联样式，要用 style={{key:value}} 的形式去写

5、只有一个根标签

6、标签必须闭合

7、标签首字母

(1)、若小写字母开头，则将该标签转为 html 中同名元素，若 html 中无该标签对应的同名元素，则报错

(2)、若大写字母开头，react 就去渲染对应的组件，若组件没有定义，则报错

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jsx语法规则</title><style>.title{background-color: orange;width: 200px;}</style>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">const myId = 'aTgUiGu'const myData = 'HeLlo,rEaCt'// 1、创建虚拟DOMconst VDOM = (<div><h2 className="title" id={myId.toLowerCase()}><span style={{color:'white',fontSize:'29px'}}>{myData.toLowerCase()}</span></h2><h2 className="title" id={myId.toUpperCase()}><span style={{color:'white',fontSize:'29px'}}>{myData.toUpperCase()}</span></h2><input type="text"/></div>)// 2、渲染虚拟DOM到页面ReactDOM.render(VDOM, document.getElementById('test'))</script>
</body>
</html>

三、jsx 练习

js 表达式

一个表达式会产生一个值，可以放在任何一个需要值的地方

(1)、 a
(2)、 a+b
(3)、demo(1)
(4)、 arr.map() 
(5)、function test () {}   - 函数定义表达式

js 语句(代码)

(1)、if(){}
(2)、for(){}
(3)、switch(){case:xxxx}

jsx 的 {} 中只能混入 JS表达式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jsx小练习</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel" >// 模拟一些数据（react可以对数组进行遍历，对象不可以）const data = ['Angular','React','Vue']// 1、创建虚拟DOMconst VDOM = (<div><h1>前端js框架列表</h1><ul>{data.map((item,index)=>{return <li key={index}>{item}</li>})}</ul></div>)// 2、渲染虚拟DOM到页面ReactDOM.render(VDOM, document.getElementById('test'))</script>
</body>
</html>