React: JSX

2021-06-26 13:01:28 阅读：173 来源： 互联网

标签：const 标签 React 报错 World JSX Hello VDom

文章目录

概述

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

React: JSX

文章目录

概述

基本使用

基本语法规则