前言
JSX(JavaScript XML),React定义的一种类似XML的JS扩展语法。
内容
定义虚拟DOM不可使用引号
const VDOM = ( <h2 id="id"> <span>hello JSX</span> </h2> )
标签中混入JS表达式时要用{}
const myId = 'myId' const myData = 'myData' const VDOM = ( <h2 id={myId.toLocaleLowerCase()}> <span>{myData.toLocaleLowerCase()}</span> </h2> )
样式类名指定需用className
class为ES6中定义类的关键词,为规避所以React中用className来代替
const myId = 'myId' const myData = 'myData' const VDOM = ( <h2 className="title" id={myId.toLocaleLowerCase()}> <span>{myData.toLocaleLowerCase()}</span> </h2> )
内联样式需使用style={{key:value}}来定义
多单词属性需使用小驼峰写法
const VDOM = ( <h2 className="title" id={myId.toLocaleLowerCase()}> <span style={{color:'white',fontSize:'55px'}}>{myData.toLocaleLowerCase()}</span> </h2> )
虚拟DOM只有一个根标签
const myId = 'myId' const myData = 'myData' const VDOM = ( <div> <h2 className="title" id={myId.toLocaleLowerCase()}> <span style={{color:'white',fontSize:'20px'}}>{myData.toLocaleLowerCase()}</span> </h2> <input type="text"/> </div> )
JSX标签必须闭合
非成对标签可自闭合
<input type="text"/>也可以<input type="text"></input>
const myId = 'myId' const myData = 'myData' const VDOM = ( <div> <h2 className="title" id={myId.toLocaleLowerCase()}> <span style={{color:'white',fontSize:'20px'}}>{myData.toLocaleLowerCase()}</span> </h2> <input type="text"/> </div> )
标签首字母
- 若小写字母开头，则转为html中同名元素，若html无该同名元素则报错。
- 若大写字母开头,则渲染对应组件,若组件没有定义则报错。
const myId = 'myId' const myData = 'myData' const VDOM = ( <div> <h2 className="title" id={myId.toLocaleLowerCase()}> <span style={{color:'white',fontSize:'20px'}}>{myData.toLocaleLowerCase()}</span> </h2> <input type="text"/> <Good>组件</Good> </div> )
基本规则概括
- 遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
- 遇到以 { 开头的代码，以JS语法解析: 标签中的js表达式必须用{ }包含
练习
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>jsx小练习</title> </head> <style> .title { background-color: red; width: 200px; height: 200px; } </style> <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 data = ['张三', '李四', '王五'] //创建虚拟DOM const VDOM = ( <div> <h1>好友有列表</h1> <ul> { data.map((item,index)=>{ return <li key={index}>{item}</li> }) } </ul> </div> ) //渲染 ReactDOM.render(VDOM,document.getElementById('test')) </script> </body> </html
学无止境,谦卑而行.
