JSX是什么蚂会？
JSX(JavaScript XML),React定義的一種類似XML的JS擴(kuò)展語法。
JSX是React生成虛擬DOM得一種js擴(kuò)展語法
在使用JSX定義虛擬DOM時(shí)不可使用引號(hào)
const VDOM = (
<h2 id="id">
<span>hello JSX</span>
</h2>
)
JSX中混入不確定屬性或者表達(dá)式需要使用{ }
const myId = 'myId'
const myData = 'myData'
const VDOM = (
<h2 id={myId.toLocaleLowerCase()}>
<span>{myData.toLocaleLowerCase()}</span>
</h2>
)
image.png
樣式類名指定需用className
class為ES6中定義類的關(guān)鍵詞,為規(guī)避所以React中用className來代替
const myId = 'myId'
const myData = 'myData'
const VDOM = (
<h2 className="title" id={myId.toLocaleLowerCase()}>
<span>{myData.toLocaleLowerCase()}</span>
</h2>
)
image.png
內(nèi)聯(lián)樣式需使用style={{key:value}}來定義
多單詞屬性需使用小駝峰寫法
const VDOM = (
<h2 className="title" id={myId.toLocaleLowerCase()}>
<span style={{color:'white',fontSize:'55px'}}>{myData.toLocaleLowerCase()}</span>
</h2>
)
image.png
虛擬DOM只有一個(gè)根標(biāo)簽
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標(biāo)簽必須閉合
非成對(duì)標(biāo)簽可自閉合<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>
)
image.png
標(biāo)簽首字母
1.若小寫字母開頭，則轉(zhuǎn)為html中同名元素各吨，若html無該同名元素則報(bào)錯(cuò)。
2.若大寫字母開頭,則渲染對(duì)應(yīng)組件,若組件沒有定義則報(bào)錯(cuò)。
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>
)
基本規(guī)則概括
1.遇到 <開頭的代碼, 以標(biāo)簽的語法解析: html同名標(biāo)簽轉(zhuǎn)換為html同名元素, 其它標(biāo)簽需要特別解析
2.遇到以 { 開頭的代碼揭蜒，以JS語法解析: 標(biāo)簽中的js表達(dá)式必須用{ }包含
總結(jié)實(shí)例
<!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小練習(xí)</title>
</head>
<style>
.title {
background-color: red;
width: 200px;
height: 200px;
}
</style>
<body>
<!--創(chuàng)建"容器"-->
<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轉(zhuǎn)js-->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
//模擬數(shù)據(jù)
const data = ['張三', '李四', '王五']
//創(chuàng)建虛擬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
