一、JSX概述
由于通过React.createElement()方法创建的React元素代码比较繁琐，结构不直观，无法一眼看出描述的结构，不优雅，开发时写代码很不友好。
React使用JSX来替代常规的JavaScript，JSX可以理解为的JavaScript语法扩展，它里面的标签申明要符合XML规范要求。
- React不一定非要使用JSX，但它有以下优点：
-
1 <div id="app"></div> 2 <!-- 引入react相关的文件 --> 3 <script src="./js/react.development.js"></script> 4 <script src="./js/react-dom.development.js"></script> 5 <script src="./js/babel.min.js"></script> 6 7 <!-- script标签上一定要写上 type="text/babel" --> 8 <script type="text/babel"> 9 // 1、创建虚拟dom 10 const vNode = <div>hello world</div>; 11 12 // 2、获取挂载点 13 const el = document.getElementById("app"); 14 15 // 3、页面渲染 16 ReactDOM.render(vNode, el); 17 </script>
三、JSX语法中的js表达式
1、嵌入js表达式
在jsx语法中，要把js代码写到{}中，所有标签必须要闭合
1 let num = 100; 2 let bool = false; 3 4 // JSX 语法 5 var vNode = ( 6 <div> 7 {/* 我是注释 */} 8 {num} 9 <hr /> 10 {/* 三目运算 */} 11 {bool ? "条件为真" : "条件为假"} 12 </div> 13 ); 14 15 ReactDOM.render(vNode, document.getElementById("app"));
2、属性绑定
对标：Vue的v-bind指令
1 const src = "http://www.mobiletrain.org/images/index/new_logo.png"; 2 const style = { fontSize: "20px", color: "red" }; 3 const html = "<a href=‘http://www.baidu.com‘>百度一下</a>"; 4 5 // 获取元素 6 const app = document.getElementById("app"); 7 // 创建虚拟DOM 8 const vNode = ( 9 <div> 10 { /*标签的属性如果需要被JSX解析，则属性的值不能加引号*/ } 11 <img src={src} /> 12 <hr/> 13 <p style={style}>北川3次地震为汶川地震余震</p> 14 <hr/> 15 <p className="cl1">iPhone12开售排队</p> 16 { 17 /* 18 输出HTML字符串（了解） 19 注意点：react默认不解析html字符串 20 原因是：安全问题 21 如果真要输出解析的html字符串请按照以下的语法 22 */ 23 } 24 <p dangerouslySetInnerHTML={{__html:html}}></p> 25 </div> 26 ); 27 // 渲染页面 28 ReactDOM.render(vNode, app);
3、数组渲染
直接渲染：会连接在一起，不便于区分
1 let arr = ["张三", "李四", "王五", "罗翔"]; 2 // 获取挂载点 3 const el = document.getElementById("app"); 4 // 创建虚拟DOM 5 const vNode = ( 6 <div> 7 {/* 直接输出数据 */} 8 {arr} 9 </div> 10 ); 11 // 渲染 12 ReactDOM.render(vNode, el); // 张三李四王五罗翔
处理后渲染
1 let arr = ["张三", "李四", "王五", "罗翔"]; 2 // 获取挂载点 3 const el = document.getElementById("app"); 4 // 创建虚拟DOM 5 const vNode = ( 6 <div> 7 {/* 给循环体包裹一层{}，不包就错 */} 8 { 9 arr.map((item, index) => { 10 return <li key={index}>{item}</li>; 11 }) 12 } 13 14 {/*如果循环体就1行，{}与return可以被省略（箭头函数）*/} 15 { 16 arr.map((item, index) => ( 17 <li key={index}>{item}</li>; 18 )) 19 } 20 </div> 21 ); 22 // 渲染 23 ReactDOM.render(vNode, el);