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

react学习笔记——3. jsx语法规则

news 2025/7/8 11:21:13

jsx是什么？

jsx全称：javaScript XML
是react定义的一种类似于XML的js扩展语法，是js+xml。
- xml早期用于存储和传输数据，是标签加数据的形式。只不过后来慢慢的变成了json
其本质就是React.createElement(标签,属性,内容)方法的语法糖
其作用是为了简化虚拟dom

jsx语法规则

定义虚拟dom时，不写引号。
虚拟dom标签中混入js 表达式 时，需要使用大括号。这里表达式不是指js代码。下面将js语句（代码）和js表达式进行区分。
1. 表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方。例如
  1. a。一个变量名
  2. a+b。两个变量相加
  3. demo(1)。调用函数，并传递1
  4. arr.map()。对数组进行加工的方法
  5. function test(){}。定义一个函数
  6. 总结：就是在左边定义一个 const x= 然后用于接收，如果能接收到，就是表达式。
2. 语句（代码）：不能进行接收的，也就是不会产生一个值。例如
  1. for(){}
  2. if(){}
  3. switch(){case:xxx}
  4. 总结：左侧不能用一个变量去接收。
如果想用class样式，不是写class=“”，而是className=“”
内联样式，则需要两个大括号，第一个表示要写js，第二个表示要写一个对象key-value的形式。如果key是类似font-size这种则需要改成小驼峰形式。
虚拟dom必须只有一个根标签
标签必须要闭合
标签首字母
1. 首字母小写，则直接转为html中找同名元素，若没有该标签对应的同名元素就报错
2. 首字母大写，则react会渲染对应的组件，如果组件没有定义，则报错

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 这是进行移动端适配的 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jsx语法规则</title><style>.title {background-color: orange;width: 400px;}</style>
</head><body><!-- 准备“容器” --><div id="test"></div><script src="../js/react.development.js"></script><script src="../js/react-dom.development.js"></script><script src="../js/babel.min.js"></script><script type="text/babel">const myId = "njTech"const myData = "hello,React"// 1、创建虚拟domconst VDOM = (<div><h2 className="title" id={myId}><span style={{ color: "white", fontSize: "40px" }}>{myData.toLowerCase()}</span></h2><input type="text" /><good>这个会找html中对应的标签，但是html中没有这个good标签，所以会给一个警告</good><Good>这个会找组件，但是没有定义Good组件，所以会报错</Good></div>// <input type="text">// 这样是报错的)// 2、渲染虚拟dom到页面ReactDOM.render(VDOM, document.getElementById("test"))/*** jsx语法规则*      1、定义虚拟dom时，不写引号。*      2、虚拟dom标签中混入js表达式时，需要使用大括号*      3、如果想用class样式，不是写class=""，而是className=""*      4、内联样式写法style={{}}，需要两个大括号，第一个表示要写js，第二个表示要写一个对象key-value的形式。如果key是类似font-size这种则需要改成小驼峰形式。*      5、虚拟dom必须只有一个根标签*      6、标签必须要闭合*      7、标签首字母*          1）首字母小写，则直接转为html中找同名元素，若没有该标签对应的同名元素就报错。*          2）首字母大写，则react会渲染对应的组件，如果组件没有定义，则报错。*/</script>
</body></html>