React——JSX语法【三】

前言

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

学无止境,谦卑而行.