代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSX语法规则</title>
    <style>
        .title{
            background-color: orange;
            width: 200px;
        }
    </style>
</head>
<body>

    <div id="test">

    </div>

    <!-- 引入React核心库 -->
    <script src="../js/react.development.js"></script>
    <!-- 引入React-dom,用于支持react操作DOM -->
    <script src="../js/react-dom.development.js"></script>
    <!-- 引入babel,用于将JSX转化为JS -->
    <script src="../js/babel.min.js"></script>

    <script type="text/babel">

        const myId = "LuoYuFeng";
        const myData = "HeLlo,rEact";

        //1.创建虚拟DOM
        const VDOM = (
            <div>
                <h2 className="title" id={myId.toLocaleLowerCase()}>
                    <span style={{color:'white',fontSize:'29px'}}>{myData.toLocaleLowerCase()}</span>
                </h2>
                <h2 className="title" id={myId.toUpperCase()}>
                    <span style={{color:'white',fontSize:'29px'}}>{myData.toLocaleLowerCase()}</span>
                </h2>
                <input type="text"/>
                <Good>123 没有定义组件时,这里会报错</Good>
            </div>
        );
        //2.渲染虚拟DOM到页面
        ReactDOM.render(VDOM,document.getElementById("test"));

        /**
         * Jsx语法规则
         * 1.定义虚拟DOM时,不要写引号
         * 2.标签中混入JS表达式时,要用{}
         * 3.样式的类名指定不要用class,要用className
         * 4.内联样式,要用style={{key:value}}的形式去写
         * 5.只有一个根标签
         * 6.标签必须闭合
         * 7.标签首字母
         *  (1).若小写字母开头,则将标签转化为html中同名元素,若html中无该标签对应的同名元素,则报错
         *  (2).若大写字母开头,react就去渲染对应的组件,若组件没有定义,则报错.
         */
    </script>

</body>
</html>

运行效果

最后修改:2021 年 06 月 05 日 02 : 10 PM