前言
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;
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