React: JSX
作者:互联网
文章目录
概述
JSX全称为 JavaScript XML,它是由react定义的一种类似于XML的JS扩展语法:XML+JS,用来创建react的虚拟DOM对象。
基本使用
<script src="../js/babel.min.js"></script>
<script type="text/babel">
// 创建虚拟DOM
const VDom = "<div id="title">Hello World</div> "
// 挂载到容器
ReactDOM.render(VDom,document.getElementById("root"))
</script>
这里直接创建一个内容为Hello World,id为title的div标签,将其赋给VDom,这就是JSX的基本使用,需要注意的是
1.我们需要babel.min.js文件来解析它
2.script类型为babel
3.它并不是字符串,也不是HTML/XML标签
4.它最终产生的就是一个JS对象
基本语法规则
看似简单的JSX其实也需要遵循一些语法规则,让我们来看下,并一一解析。
- 定义虚拟DOM时,不要写引号
- 标签中混入JS表达式时要用{}
- 样式的类名指定不要用class,要哟个className
- 内联样式,要用 style={{key:value}}的形式去写
- 只有一个根标签
- 标签必须要闭合
- 标签首字母
1.若小写字母开头,则将标签转为html中的同名元素,若html中无该标签对应的同名元素,则报错
2.若大写字母开头,react就去渲染对应的组件,若组件没有定义,则报错。
1.定义虚拟DOM时,不要写引号
很容易理解,就是我们定义的虚拟DOM并不需要用引号将其包裹
如下写法就是错误的
const VDom = "<div id="title">Hello World</div>"
应该去掉引号
const VDom = <div id="title">Hello World</div>
2.标签中混入JS表达式时要用{}
有时我们想要引入一定的JS代码,这时我们就可以通过{}包裹
如引入声明好的变量
const id="title"
// 创建虚拟DOM
const VDom =<div id={id}>Hello World</div>
3.样式的类名指定不要用class,要哟个className
为了区分类关键字class,标签类名应为className
const VDom =<div className="myclass">Hello World</div>
当然写错了也会友情提醒您:我不懂你的意思,你是在说className吗
4.内联样式,要用 style={{key:value}}的形式去写
const VDom =<div style={{color:"green",fontSize:"16px"}}>Hello World</div>
需要注意的是这里green要用引号包围,不然会被解析为变量未找到。
如果是像字体大小、背景颜色这种组合词的话需要用小驼峰命名法
5.只有一个根标签
也就是说我们在写的所有标签都应该被包裹在一个根标签内,如
const VDom =(
<div id="title">
<span>Hello World</span>
</div>
)
这里根标签是id为title的div标签,且只有一个根标签。
像以下多个根标签则会标错
const VDom =(
<div id="title">
<span>Hello World</span>
</div>
<p></p>
)
报错意思就是说相邻的JSX元素应该包裹在一个封闭的标签中
但如果我们就想这样的形式,又不想再在外面添加一个总的根标签,这时我们可以用React.Fragment包裹
const VDom =(
<React.Fragment>
<div id="title">
<span>Hello World</span>
</div>
<p></p>
</React.Fragment>
)
6.标签必须要闭合
这就很容易理解了,不多赘述
7.标签首字母
1.若小写字母开头,则将标签转为html中的同名元素,若html中无该标签对应的同名元素,则报错
就是标签名的首字母若是小写,则解析时会根据标签名去html标签中对比寻找,找到则解析成对应html,不然直接报错
如以下study标签
<study></study>
2.若大写字母开头,react就去渲染对应的组件,若组件没有定义,则报错。
标签名首字母大写时,会将其解析为组件名,然后去组件中找,没找到则报错
<Study></Study>
标签:const,标签,React,报错,World,JSX,Hello,VDom 来源: https://blog.csdn.net/qq_43522998/article/details/118242833