React之JSX的使用规则及简单代码实例

文章目录

JSX
参考

JSX

JSX全称JavaScript XML是react定义的一种类似于XML的JS的扩展语法，本质是React.creatElement(component, props, …chilren)方法的语法糖，作用就是用来简化创建虚拟DOM。

一些规则

jsx语法规则：
1.定义虚拟dom不用写引号
2.标签种混入js表达式要有{}
3.样式类名指定使用className
4.内联样式，要用style={{key:value}}的形式去写
5.必须只有一个根标签
6.标签需要闭合
7.标签首字母：
1)若小写字母开头，则将标签改为html中同名元素
2)若大写字母开头，react则去渲染对应的组件，若组件没有定义，则报错

实例1

js变量值传递、css样式设置，class设置等
默认已经导入react所需的js
jsx1.html文件如下：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style type="text/css">
        .title{
            background:palegreen;
            width:200px;
        }
    style>
head>
<body>
    <div id="test">div>
    <script src="../js/react.development.js">script>
    <script src="../js/react-dom.development.js">script>
    <script src="../js/babel.min.js">script>
    <script type="text/babel">
        const myId = 'hellO world'
        const myData = "hehehh GG"
        //创建虚拟dom
        const VDOM = (
            <h2 className="title" id={myId.toLowerCase()}> 
                <span style={{color: 'red', fontSize:'30px'}}>{myData}</span>
                <input type="text"/>
            </h2>
        )
        //渲染虚拟dom到页面
        // ReactDOM.render(虚拟DOM, 容器)
        ReactDOM.render(VDOM, document.getElementById('test'))
        /*
        jsx语法规则
        1.定义虚拟dom不用写引号
        2.标签种混入js表达式要有{}
        3.样式类名指定使用className
        4.内联样式，要用style={{key:value}}的形式去写
        5.必须只有一个根标签
        6.标签需要闭合
        7.标签首字母：
                1)若小写字母开头，则将标签改为html中同名元素
                2)若大写字母开头，react则去渲染对应的组件，若组件没有定义，则报错

        */
    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
36
37
38
39
40
41
42
43
44
45
46
47
48

运行结果：
在这里插入图片描述

实例2

遍历js遍历生成dom
jsx2.html如下：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style type="text/css">
        .title{
            background:palegreen;
            width:200px;
        }
    style>
head>
<body>
    <div id="test">div>
    <script src="../js/react.development.js">script>
    <script src="../js/react-dom.development.js">script>
    <script src="../js/babel.min.js">script>
    <script type="text/babel">
        const data = ["Angular", "React", "Vue"]
            const VDOM = (
                <div>
                    <h1>前端js框架</h1>
                    <ul>
                        {
                            data.map(
                                (item, index)=>{
                                    return <li key={index}>{item}</li>
                                }
                            )
                        }
                    </ul>
                </div>
            )
            ReactDOM.render(VDOM, document.getElementById("test"))
    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
36
37
38
39

运行结果如下：
在这里插入图片描述

参考

https://www.bilibili.com/video/BV1wy4y1D7JT?p=5&spm_id_from=pageDriver&vd_source=f57738ab6bbbbd5fe07aae2e1fa1280f

相关阅读:
常见的积分商城游戏类型有哪些？
【计算机视觉 | 目标检测】arxiv 计算机视觉关于目标检测的学术速递（6月 23 日论文合集）
Unity的AB包相关
鼎捷前端开发校招岗技术面面经（已过）
Avalonia开发（一）环境搭建
机器视觉选型-什么时候用远心镜头
HTML+CSS+JS制作一个迅雷看看电影网页设计实例，排版整洁，内容丰富，主题鲜明，简单的网页制作期末作业
数据挖掘复盘——apriori
【微服务】spring webflux响应式编程使用详解
S7-200SMART PLC进行MODBUS通信轮询时正常轮询读操作，对写操作进行插队处理的具体方法演示

原文地址：https://blog.csdn.net/qq_52785473/article/details/126184842