花生_TL007

这个屌丝很懒，什么也没留下！

热门标签

React JSX_jsx里面的id怎么写

作者：花生_TL007 | 2024-04-27 02:53:22

踩

jsx里面的id怎么写

React JSX

文章目录

React JSX
前言
一、JSX语法？
二、JSX语法规则
三、jsx小练习
总结

前言

在上一篇的学习中，我们已经知道了，jsx的书写能如何简化我们的代码量，那么接下来，我们将学习下jsx的语法规范

提示：以下是本篇文章正文内容，下面案例可供参考

一、JSX语法？

1)全称：JavaScript XML
2)react定义的一种类似于XML的js扩展语法比如下面的VDOM
3）作用：用来简化创建的DOM

a)写法：
	const VDOM=(
		       <h1>
		            <span id="span">
		                hello react
		            </span>
		        </h1>
		    );
b)注意：它不是字符串，也不是HTML/XML标签
c)本质是React.creatElement(component,props,....children)方法的语法糖，最终产生的是一个JS对象
d）标签名任意：HTML标签或者其他标签
1
2
3
4
5
6
7
8
9
10
11

二、JSX语法规则

1.不用写双引号

代码如下（示例）：

<script type="text/babel">
	const VDOM=(
	            <h1 id={id_h}>
	            <span id={id}>
	                hello react
	            </span>
	        </h1>
	    );//注意这里不要加引号，因为是jsx，不是js
</script>
1
2
3
4
5
6
7
8
9

2.标签中混入js表达式时要用{}

代码如下（示例）：

<script type="text/babel">
    const id="sPan";
    const id_h="niupi";
    const VDOM=(
            <h1 id={id_h.toLowerCase()}>
            <span id={id.toLowerCase()}>
                hello react
            </span>
        </h1>
    );//注意这里不要加引号，因为是jsx，不是js
//    引入了React核心库和依赖库，所以全局多了React，和ReactDOM
   ReactDOM.render(VDOM,document.getElementById("test"));

</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

在这里插入图片描述

3.样式的类名指定不要用class,要用className

在这里插入图片描述

4.内敛样式：要用style={{key:value}}的形式去写

在这里插入图片描述 {{属性名：‘值’}}注意值这里要加引号

<script type="text/babel">
    const id="sPan";
    const id_h="niupi";
    const VDOM=(
            <h1 class="title" id={id_h.toLowerCase()}>
            <span id={id.toLowerCase()} style={{color:"white"，fontSize:"30"}}>
                hello react
            </span>
        </h1>
    );//注意这里不要加引号，因为是jsx，不是js
//    引入了React核心库和依赖库，所以全局多了React，和ReactDOM
    ReactDOM.render(VDOM,document.getElementById("test"));

</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

5.里面只能有一个根标签

下面这样写有两个根标签
在这里插入图片描述
所以我们可以用一个更大的div包括进来，就不会报错了

6.标签必须闭合

下面的写成就可以了
在这里插入图片描述

7.标签首字母

1）若首字母小写，则会将标签转为html中同名元素，若html中没有该标签对应的同名元素，则报错比如<good>
2)若首字母大写，react就去渲染对应的组件若组件没有定义，则报错。
1
2

三、jsx小练习

完成可以动态改变的数据，将其显示在集合中
效果：
在这里插入图片描述
尝试一：

结果：

尝试二：

但是不会有人那样定义数组，所以我们得多数组进行改造

尝试三：对象无法遍历{}
在这里插入图片描述

尝试四：for循环遍历，但是{}里面不让写for循环，｛｝里面写的是表达式，for循环是语句

什么是表达式？什么是语句

表达式（前面可以用一个变量接受的）
语句

用表达式进行加工：
最终：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</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=['Vue','React','Angular'];
    const Vdom=(
        <span> 你好</span>
    )
    const  VDOM=(
        <div>
            <h1>前端js框架列表</h1>
            {
//                {}会将数组自动然后展现出来
                data.map(function (item,index) {
//                    key必不可少，这样子定义后面会出问题，我们现在先这样定义着
                    return <li key={index}>{item}</li>
                })
            }
            {Vdom}
        </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

总结

下一节，我们接着学习

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/494415