jsx定义与规则

小叶_01

已于 2022-08-08 21:46:57 修改

阅读量123

点赞数

分类专栏： js+ts 随笔文章标签： react.js javascript 前端

于 2022-08-08 21:44:38 首次发布

本文链接：https://blog.csdn.net/qq_38799387/article/details/126236846

版权

js+ts 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

随笔

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>jsx的语法规则</title>
    <!-- 引入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>
    <style>
        .title {
            background-color: #ffa400;
        }
    </style>
</head>

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

    <script type='text/babel'>
        //模拟一些数据
        const data = 'Hello, World'
        // 1.创建虚拟DOM
        const VDOM = (
            <div>
                <h1 style={{ color: 'white', fontSize: '16px' }} className="title">{data}</h1>
                <span>hello</span>
                <input type="text" />
                {/* 这是一条注释<peiqi>一头猪</peiqi> */}
            </div>)
        // 2.渲染虚拟DOM到页面
        ReactDOM.render(VDOM, document.getElementById('test'))

        /**
         * JSX: 全称JavsScript XML
         * 是react定义的一种类似于XML的JS扩展语法：JS + XML 本质是
         * React.createElement(component, props, ...children)方法的语法糖
         * 
          * jsx语法规则：
          *  1.创建虚拟DOM时，不要写引号；
          *  2.标签中要混入【js表达式】，要使用{}
          *  3.标签中样式的类名要用className来指定
          *  4.标签中的内联样式要用style={{color:'white'}},属性名转为小驼峰
          *  5.VDOM每次创建只能有一个根标签
          *  6.标签必须闭合（单标签加 / 自闭合）
          *  7.关于标签首字母：
          *      1） 若首字母小写，那么React就会去寻找与之同名的<html标签>
          *          · 若找见，直接转为html同名元素
          *          · 若未找见，报错
          *      2） 若首字母大写，那么React就会去寻找与之同名的组件（component），
          *          · 若找到就使用
          *          · 若没有就会报错
          *  8.注释时先用{}包起来变成js表达式再注释
         */

    </script>
</body>

</html>