JSX是什么？
JSX(JavaScript XML),React定義的一種類似XML的JS擴展語法。
JSX是React生成虛擬DOM得一種js擴展語法
在使用JSX定義虛擬DOM時不可使用引號
const VDOM = (
<h2 id="id">
<span>hello JSX</span>
</h2>
)
JSX中混入不確定屬性或者表達式需要使用{ }
const myId = 'myId'
const myData = 'myData'
const VDOM = (
<h2 id={myId.toLocaleLowerCase()}>
<span>{myData.toLocaleLowerCase()}</span>
</h2>
)
image.png
樣式類名指定需用className
class為ES6中定義類的關鍵詞,為規(guī)避所以React中用className來代替
const myId = 'myId'
const myData = 'myData'
const VDOM = (
<h2 className="title" id={myId.toLocaleLowerCase()}>
<span>{myData.toLocaleLowerCase()}</span>
</h2>
)
image.png
內聯樣式需使用style={{key:value}}來定義
多單詞屬性需使用小駝峰寫法
const VDOM = (
<h2 className="title" id={myId.toLocaleLowerCase()}>
<span style={{color:'white',fontSize:'55px'}}>{myData.toLocaleLowerCase()}</span>
</h2>
)
image.png
虛擬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>
)
image.png
標簽首字母
1.若小寫字母開頭，則轉為html中同名元素，若html無該同名元素則報錯。
2.若大寫字母開頭,則渲染對應組件,若組件沒有定義則報錯。
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.遇到 <開頭的代碼, 以標簽的語法解析: html同名標簽轉換為html同名元素, 其它標簽需要特別解析
2.遇到以 { 開頭的代碼，以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>
<!--創(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轉js-->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
//模擬數據
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
