2、React：React的 JSX 語法規則介紹
阿新 • • 發佈：2021-02-11
文章目錄
JSX定義
- 全稱：
JavaScript XML - 類似：
React定義的一種類似於XML的JS擴充套件語法：JS+XML - 本質：是
React.createElement(component，props，...children)方法的語法糖 - 作用：用來簡化建立虛擬
DOM - 標籤名任意:：
HTML標籤或其它標籤 - 標籤屬性任意：
HTML標籤屬性或其它 - 參考網站：網站
JSX語法規則
- 定義虛擬
DOM時，不要寫引號 - 標籤中如果需要混入
JS表示式時，需要使用{ }
<script type="text/babel" - 樣式的類名指定不要使用
class，要用className
<head>
<style>
.title{
background-color: aqua;
width: 500px;
}
</style>
</head>
<body>
<!-- 準備好一個"容器" -->
<div id="test"></div>
<script type - 內聯樣式(在
JSX語法中使用)，要使用style={{key：value}}的形式去寫。
<script type="text/babel">
//1.建立虛擬DOM
const VDOM = (
<h1 id="jsx" className='title'>
<span style={{color:'white',fontSize:'50px'}}>Hello,React-JSX</span>
</h1>
)
//2.渲染虛擬DOM到頁面
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
JSX中只能有一個根標籤- 標籤必須閉合
<span></span> - 標籤首字母規則
- 如果是小寫字母開頭，則將該標籤轉為
html中同名的元素，若html中無該標籤對應的同名元素，則報錯 - 如果是大寫字母開頭，
React就去渲染對應的元件，若元件沒有定義，則報錯
- 如果是小寫字母開頭，則將該標籤轉為
JSX練習
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<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 = ['學習的第一天','學習的第二天','學習的第三天']
//1.建立虛擬DOM
const VDOM = (
<div>
<h1>學習React很開心</h1>
<ul>
{
data.map((item,index)=>{
return <li key={index}>{item}</li>
})
}
</ul>
</div>
)
//2.渲染虛擬DOM到頁面
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
</body>
</html>
效果
總結
- 在
JSX中可以巢狀多個HTML標籤，只需要使用div元素包裹起來即可
<script type="text/babel">
//1.建立虛擬DOM
const VDOM = (
<div>
<h1 id="jsx" className='title'>
<span style={{color:'white',fontSize:'50px'}}>Hello,React-JSX</span>
</h1>
<input type="text"/>
</div>
)
//2.渲染虛擬DOM到頁面
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
-
在
JSX中使用JavaScript表示式。表示式寫在花括號 {}中。 -
在
JSX中不能使用if else語句，但可以使用conditional (三元運算) 表示式來替代。 -
React推薦使用內聯樣式。可以使用camelCase(駝峰) 語法來設定內聯樣式.。React會在指定元素數字後自動新增px。 -
JSX允許在模板中插入陣列，陣列會自動展開所有成員
<script type="text/babel">
var arr = [
<h1>張三</h1>,
<h1>李四</h1>
]
//1.建立虛擬DOM
const VDOM = (
<div>
<h1>{arr}</h1>
</div>
)
//2.渲染虛擬DOM到頁面
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
學習網址：網址