React：JSX的语法规则，一文就够了

Jay丶萧邦

已于 2022-04-29 21:39:52 修改

阅读量2.1k

点赞数 6

分类专栏： React 文章标签： React JSX 虚拟DOM 用户界面 Babel

于 2022-04-28 20:53:20 首次发布

本文链接：https://blog.csdn.net/qq_42543244/article/details/124478485

版权

React 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

这两天看到一个交流群的前端人，使用react，jsx语法，把他折磨的生不如死；主要是因为未使用过react，更未使用过jsx，纯纯的赶鸭子上架，感觉可太难了！

话不多说，我们直接进入正题！

什么是JSX？

要想写jsx的语法，那么就得先了解jsx是什么，有什么用？借用百度的话：

JSX是一种JavaScript的语法扩展，运用于React架构中，其格式比较像是模版语言，但事实上完全是在JavaScript内部实现的。元素是构成React应用的最小单位，JSX就是用来声明React当中的元素，React使用JSX来描述用户界面。

那么本质就出来了，JSX说白了就是js语法的一个扩展，是一个看起来很像 XML 的 JavaScript 语法扩展！我们也许不一定使用JSX，但是需要知道JSX有什么优点！

JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化
它是类型安全的，在编译过程中就能发现错误
使用 JSX 编写模板更加简单快速

很是推荐在React中使用jsx代替常规的js，使用jsx来描述用户界面！总的来说啊，用React不使用jsx，就像吃方便面不撒调料包，木有灵魂🤓

JSX语法规则

首先，我们就不去新建完整的React项目了，普通的html就好，主要引入以下几个js

<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

说一下这几个js库分别的作用

第一个：react.development.js，这个是React的核心库

第二个：react-dom.development.js，react-dom库，用于支持react操作dom

第三个：babel.js，这个很熟悉，起转换的作用，这里是将jsx转化为js

好，整体如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jsx语法</title>
</head>
<body>
<div id="app"></div>
</body>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
   
</script>
</html>

1. 定义虚拟DOM时，不要写引号

这个意思很简单，顾名思义，就是定义虚拟dom的时候，不要把它写成一个字符串。在js，jq中，我们应该写过这样的代码，jq的追加元素，我们追加的是字符串dom

var txt="<p>hello</p>"
$("body").append(txt);

在JSX中需要这么写！万万不要写成字符串了哦！

正确写法

<script type="text/babel">
     const app = document.getElementById('app')
     const VDOM = (
        <div>
            <h2>hello</h2>
        </div>
    )
    ReactDOM.render(VDOM, app)
</script>

2.标签中混入js表达式的时候，需要使用 { }

小声bb，写vue写习惯了，上来就 {{ }} , 然后光荣报错

<script type="text/babel">
    const app = document.getElementById('app')
    const str = 'hello'
    const VDOM = (
        <div>
            <h2>{str}</h2>
        </div>
    )
    ReactDOM.render(VDOM, app)
</script>

得到的结果，与上图一致

3.样式的类名指定不要用class，需要使用className

分三种情况吧！

3.1 直接使用class类名

<style>
    .import {
        color: #ff0000;
    }
</style>

...

<script type="text/babel">
    const app = document.getElementById('app')
    const VDOM = (
        <div className="import">
           <h2>hello</h2>
        </div>
       )
    ReactDOM.render(VDOM, app)
</script>

3.2 使用类名变量

<style>
    .big {
        font-size: 50px;
        font-weight: bold;
    }
</style>

...

<script type="text/babel">
    const app = document.getElementById('app')
    const bigClass = 'big'
    const VDOM = (
        <div className={bigClass}>
            <h2>hello</h2>
        </div>
    )
    ReactDOM.render(VDOM, app)
</script>

3.3 综合，同时存在

<style>
    .big {
        font-size: 50px;
        font-weight: bold;
    }

    .import {
        color: #ff0000;
    }
</style>

...

<script type="text/babel">
    const app = document.getElementById('app')
    const bigClass = 'big'
    const VDOM = (
       <div className={`${bigClass} import`}>
            <h2>hello</h2>
       </div>
    )
    ReactDOM.render(VDOM, app)
</script>

请记住，是className！！！

4.内联的样式，需要用style={{key:value}}的形式来编写

4.1 内联行内样式写法

<script type="text/babel">
    const app = document.getElementById('app')
    const VDOM = (
        <div style={{color: '#ff0000', fontWeight: 'bold'}}>
            <h2>hello</h2>
        </div>
    )
    ReactDOM.render(VDOM, app)
</script>

4.2 变量式写法

<script type="text/babel">
    const styles = {
        color: 'red',
        fontWeight: 'bold'
    }
    const VDOM = (
        <div style={styles}>
            <h2>hello</h2>
        </div>
    )
    ReactDOM.render(VDOM, app)
</script>

效果同上

5. 只有一个根标签

这个也很好理解，我直接写个错误的例子

   const VDOM = (
        <div>
            <h2>hello</h2>
        </div>
    <div>123</div>
    )

这么写，编辑器上是直接就爆红的，至少webstorm是。。。页面错误打印为：

翻译是：相邻的JSX元素必须包装在一个封闭的标记中

6. 标签首字母

标签首字母为小写

会自动寻找与之匹配的html标签

<script type="text/babel">
    const app = document.getElementById('app')    
    const VDOM = (
        <div>
            <img src="https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg" alt=''/>
        </div>
    )
    ReactDOM.render(VDOM, app)
</script>

正常显示，没啥毛病

标签首字母大写

<script type="text/babel">
    const app = document.getElementById('app')
    const VDOM = (
        <Goods>
            hahahha
        </Goods>
    )
    ReactDOM.render(VDOM, app)
</script>

大写的话，会自动去寻找我们写的自定义组件，这里不再过多的讲述，此时页面会输出

 Goods is not defined

小写开头，但是是个不存在的html标签

<script type="text/babel">
    const app = document.getElementById('app')
    const VDOM = (
        <qianjue>hahah</qianjue>
    )
    ReactDOM.render(VDOM, app)
</script>

qianjue这个标签是个不存在的html，且看页面怎么报的错

The tag <qianjue> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter

翻译过来就是：此浏览器无法识别标签<qianjue>。如果要呈现React组件，请以大写字母开头。

是不是瞬间恍然大悟了！

7. 表达式-判断

只要写js，就少不了判断，且看jsx中是如何进行三元运算符的

<script type="text/babel">
    const app = document.getElementById('app')
    let type = 1;
    const VDOM = (
        <div className={type === 1 ? 'import' : ''} style={{color: type === 1 ? '#ff0000' : ''}}>
            <h2>{type === 1 ? 'hello' : ''}</h2>
            <h2>{type + 1}</h2>
        </div>
    )
    ReactDOM.render(VDOM, app)
</script>

总结：

JSX的语法，其实并不复杂，其主要本身还是js，主要用于简化创建虚拟的DOM

值得注意的是：JSX并不是字符串，也不是html/xml标签，JSX最终产生的就是一个js对象

可能刚开始接触jsx的时候，会觉得哪哪都别扭，写不习惯，多练练写写，找找感觉，去体会体会它的语法，设计理念，不要一味的抵触，害怕。加油，这根本就不是个事！

原创不易，最近也在参加新星计划的比赛，如果觉得写得还行，多少有点帮助，请您动动您发财的小手，给个赞或者收藏或者评论，有什么意见也可以提出来，感谢对我的帮助！先行谢过！

Jay丶萧邦

关注

6
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
React：JSX的语法规则，一文就够了

这两天看到一个交流群的前端人，使用react，jsx语法，把他折磨的生不如死；主要是因为未使用过react，更未使用过jsx，纯纯的赶鸭子上架，感觉可太难了！话不多说，我们直接进入正题！什么是JSX？要想写jsx的语法，那么就得先了解jsx是什么，有什么用？借用百度的话：JSX是一种JavaScript的语法扩展，运用于React架构中，其格式比较像是模版语言，但事实上完全是在JavaScript内部实现的。元素是构成React应用的最小单位，JSX就是用来声明React当中的元素，.
复制链接

扫一扫