React jsx 简介与一些语法规则

news2024/11/17 9:45:22

什么是 Jsx

简单例子：

        //create virtual dom , single quotes is not need
        const VDOM = <h1> Hello, React </h1>  
        //appy virtual dom to page
        ReactDOM.render(VDOM, document.getElementById("test"))  //first parameter is virtual dom, second parameter is container (div)

定义：

fullname: JavaScript XML
它是React 定义的一种类似与XML（HTML 也是类XML）的JS 扩展语法: JS + XML
本质是 React.createElement(component, props,… children) 的语法糖
作用，用于简化创建虚拟DOM

写法：

    var ele = (<div>
                       <span>hello Jsx<span>
               <div>)

注意1，它不是字符串，也不是HTML/XML 标签
注意2，它最终产生的就是1个JS 的普通对象

语法规则1：不要用双引号括住 Jsx Vdom对象的标签内容

下面例子是错误的：

	var ele  = "<h1>hello jsx<h1>"  //只创建了1个String对象， 而不是 Vdom 对象

这个是正确的

    var ele = <h1>hello jsx<h1>
    var ele2 = (  //分行的话可以用括号
 				<h1>hello jsx<h1>
              )

语法规则2：当标签中混入js表达式时，需要用大括号{}

这个规则在定义VDOM 元素id和内容时是十分常用。
例子：

<body>

    <div id ="test"></div>

    <script src="../node_modules/react/dist/react.min.js"></script>
    <script src="../node_modules/react-dom/dist/react-dom.min.js"></script>
    <script src="../node_modules/babel-standalone/babel.min.js"></script>


    <script type="text/babel">
        const myId = 'h2ID1'
        const myData = 'Hello, Jsx!'

        const VDOM = (
            <h2 id = {myId.toLowerCase()}>
                <span>{myData}</span>
            </h2> 
        )

        ReactDOM.render(VDOM,document.getElementById('test'))

    </script>
</body>

在这里插入图片描述

语法规则3：当指定样式类名时，要用className 而不是默认的class, 而且不需要大括号{}

因为class时ES6 的关键字，所以react用的时className以避开
例子：
这里定义了1个sytle_title的样式类
index.css

.style_title{
    background-color: orange;
    width: 200px;
}

index_css.html

<body>
    <div id ="test"></div>

    <script src="../node_modules/react/dist/react.min.js"></script>
    <script src="../node_modules/react-dom/dist/react-dom.min.js"></script>
    <script src="../node_modules/babel-standalone/babel.min.js"></script>
     <link rel="stylesheet" href="./index.css">
     
    <script type="text/babel">
        const myId = 'h2ID1'
        const myData = 'Hello, Jsx!'

        const VDOM = (
            <h2 id = {myId.toLowerCase()} className='style_title'>
                <span>{myData}</span>
            </h2> 
        )

        ReactDOM.render(VDOM,document.getElementById('test'))

    </script>
   
</body>

语法规则4：当使用内联模式的样式时，必须用双大括号{{key:“value”}}模式

下面这样，使用正常的内联样式写法在react的VDOM里是错误的

        const VDOM = (
            <h2 id = {myId.toLowerCase()}>
                <span style="color:green; fontSize:20px">{myData}</span>
            </h2> 
        )

        ReactDOM.render(VDOM,document.getElementById('test'))

正确写法：

        const VDOM = (
            <h2 id = {myId.toLowerCase()}>
                <span style={{"color":"green", "fontSize":"30px"}}>{myData}</span>
            </h2> 
        )

        ReactDOM.render(VDOM,document.getElementById('test'))

注意style= 后面跟住的是双大括号，最外层的大括号表示里面要写js表达式，里面那层大括号表示里面写的是js对象，
里面的键值对中，值的值必须用双引号括住.

语法规则5 , 每个虚拟DOM的定义中，只能有1个根标签

例如下面的写法时错误的
因为最高层有两个h2 标签。在vscode里也会有语法高亮提示错误

        const VDOM = (
            <h2 id = {myId.toLowerCase()}>
                <span style={{"color":"green", "fontSize":"30px"}}>{myData}</span>
            </h2> 
            <h2 id = {myId.toLowerCase() + "_2"}>
                <span style={{"color":"blue", "fontSize":"30px"}}>{myData}</span>
            </h2> 
        )

        ReactDOM.render(VDOM,document.getElementById('test'))

解决方法很简单，最外层用1个div包住即可

     const VDOM = (
            <div>
                <h2 id = {myId.toLowerCase()}>
                    <span style={{"color":"green", "fontSize":"30px"}}>{myData}</span>
                </h2> 
                <h2 id = {myId.toLowerCase() + "_2"}>
                    <span style={{"color":"blue", "fontSize":"30px"}}>{myData}</span>
                </h2> 
            </div>
        )

        ReactDOM.render(VDOM,document.getElementById('test'))

语法规则6 , 标签必须闭合

下面写法是错误的

		const VDOM = (
            <div>
               <input type="text">
            </div>
        )

        ReactDOM.render(VDOM,document.getElementById('test'))

我们需要显式闭合标签

		const VDOM = (
            <div>
               <input type="text"></input>
               <input type="text /> //也可以
            </div>
        )

        ReactDOM.render(VDOM,document.getElementById('test'))

语法规则7 , 标签首字母，

如果是小写，则React会将jsx标签转化为html同名标签. 若html中无此标签则报错
如果是大写，则React会认为是1个React组件（Component）, 若组件没有定义则报错

	const VDOM = (
            <div>
               <good>hey</good> //小写， 报错， 因为html中没有good这个标签
               <Good>hey</Good> //大写， React 认为是1个Good组件， 取决与有没定义
            </div>
        )