React（五）：jsx语法
1.jsx语法
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jsx语法</title> <script src="https://unpkg.com/react@18/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> <!-- Don't use this in production: --> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <style> .myBody { background-color: aqua; margin: 10px; } </style> </head> <body> <!-- 准备一个容器 --> <div id="test"></div> </body> <script type="text/babel"> const myId = 'tiTle' const myContent = 'HeLLo,rEAcT' // 使用jsx创建虚拟DOM const vDom = ( <div> <div className="myBody"> <h1 id={myId.toLocaleUpperCase()}> <span style={{color: 'white', fontSzie: '30px'}}>{myContent.toLocaleUpperCase()}</span> </h1> </div> <div className="myBody"> <h1 id={myId.toLocaleLowerCase()}> <span>{myContent.toLocaleLowerCase()}</span> </h1> </div> </div> ) //react渲染 ReactDOM.render(vDom, document.getElementById("test")) /*jsx语法规则 1.定义虚拟DOM时，不要用引号包裹，用引号写的是字符串 2.标签中写js表达式要用{} 3.样式的类名指定不要用class，要用className 4.内联样式要用style={{key:value}}的形式去写，外层大括号表示写的是js表达式，内层大括号表示是一个对象，"-"连接的样式名称要写成大驼峰的形式 5.只能有一个根标签，也就是说无论有多少个标签，最终都要被一个标签包裹着 6.所有标签必须闭合 7.小写字母开头的标签会解析为html标签，没有对应标签的话会报错；大写字母开头的回去找对应的组件进行渲染，没有对应组件的话会报错 */ </script> </html>
2.jsx中数组遍历
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jsx小练习之数组遍历</title> <script src="https://unpkg.com/react@18/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> <!-- Don't use this in production: --> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <style> .myBody { background-color: aqua; margin: 10px; } </style> </head> <body> <!-- 准备一个容器 --> <div id="test"></div> </body> <script type="text/babel"> const arr = [1,3,5,7,9] // 使用jsx创建虚拟DOM const vDom = ( <div> <h1>个位奇数</h1> <ul> { arr.map((number, index) => { return <li key={index}>{number}</li> }) } </ul> </div> ) //react渲染 ReactDOM.render(vDom, document.getElementById("test")) /* 1. map(callbackFc)函数 结果：返回一个新的数组 参数：callbackFc，一个回调函数 函数可以携带三个参数(element, index, arr) element：每一个数组元素，必须 index：索引，非必须 arr: 当前数组，非必须 2. jsx中{}只能写js表达式，不能写js语句，表达式就是有返回值的东西 3. jsx在遍历数组时，必须有key，key作为每一个元素的唯一标识是不能重复的 */ </script> </html>
