• 2、React中的JSX使用


    1、介绍

    JSX全称为JavaScript XML(JS+XML),是React定义的一种类似于XML的JS扩展语法。

    作用:用来简化创建React虚拟DOM

    优势:声明式语法更加直观,与HTML结构相同,降低学习成本,提高开发效率。

    注意:JSX并非标准的JS语法,浏览器、nodejs均无法识别,需要借助@babel/plugin-transform-react-jsx包解释该语法(JSX=>JS),babel中文官网:https://www.babeljs.cn

    2、语法

    • 定义虚拟DOM时,不要写引号(JSX语法规定)。

    • 只能有一个根标签。

    • 所有标签必须闭合。

    • 标签中混入JS表达式时要用{},不能混入JS语句(JS表达式和语句的区别:xxx)。

    • 标签的类名指定不要用class,要用className(class是ES6中定义类的关键字)。

    • 内联样式,要用style={{key:value}}的形式写(外层{}代表JS表达式容器,内层{}代表JS对象)。

    • 标签首字母大小写问题:

      ​ ①若小写字母开头,则将该标签转为html中同名标签,若html中无该标签对应的同名元素,则报错。

      ​ ②若大写字母开头,react就去渲染对应的组件,若组件没有定义,则报错。

    3、演示使用

    DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>jsx语法title>
        head>
        <body>
            
            <div id="container">div>
    
            <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js">script>
            <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js">script>
            <script src="https://unpkg.com/babel-standalone@6/babel.js">script>
    
            
            <script type="text/babel" >
                let hello = "Hello React";
                //1.创建虚拟DOM
                const VDOM = (  /* 此处一定不要写引号,因为不是字符串 */
                    // 根标签只能有一个
                    // 标签的class属性,要用className,不要用class
                    <div title="rootTag" className="rootTag">
                        
                        {/*内联样式,要用style={{key:value}}的形式写*/}
                        <div style={{color:'red',width:'100px',height:'100px',background:'grey'}}>
                            {/*标签中混入JS表达式时要用{}*/}
                            {hello}
                        </div>
                    </div>
                )
                //2.渲染虚拟DOM到页面
                ReactDOM.render(VDOM,document.getElementById('container'))
            script>
        body>
    html>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35

    运行结果:

    在这里插入图片描述

  • 相关阅读:
    leetcode 216. 组合总和 III
    web网站开发人员有哪些必学的基础?
    workerman,swoole,golang并发性能测试
    一本通1072;鸡尾酒疗法
    迟到的秋招经验分享贴,希望能帮到大家
    环境叙事总结(待更)
    MindFusion.WinForms Pack 2022.R2
    数仓分层能减少重复计算,为啥能减少?如何减少?这篇文章包懂!
    Matlab:转换日期向量返回意外输出
    vcpkg: bootstrap-vcpkg.bat下载失败问题
  • 原文地址:https://blog.csdn.net/xiao_yu_gan/article/details/126798250