# JSX 基本语法规则

叫我AddV
306 阅读5分钟

JSX 基本语法规则

上一篇博文稍微说了一下 虚拟DOM 和 真实DOM 的区别，这一篇我们稍微说一下 jsx 的一些语法规则，这个是在开发中经常遇到的，今天稍微过一下。

什么是 JSX

  • JSX 全称是 JavaScript XML。
  • react 定义的一种类似于 xml 的 js 拓展语法：js + xml。
  • 本质是 React。createElement(component, props, ... children) 的语法糖。
  • 作用： - 写法： var ele = <h1> 我是𝒆𝒅. </h1> - 他不是字符串，也不是 HTML/XML 标签 - 他最终产生的就是一个 js 对象
  • 标签名任意：html 标签或者是其他标签。

使用JSX创建虚拟DOM

这个案例都快被我写烂了，直接复制过来吧，不详细说了。

<!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>jsx语法规则</title>
</head>

<body>

    <!-- 准备好一个容器 -->
    <div id="app"></div>
    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom 用于支持 react 操作 dom -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入 label，用于将 jsx 转化为 js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <!-- 此处必须写 text/babel -->
    <script type="text/babel">
        // 1. 创建虚拟dom
        const VDOM = ( // 此处一定不要写双引号，因为不是字符串。
            <h1 id="user">
                <span>我是𝒆𝒅.</span>
            </h1>)
        // 2. 渲染虚拟dom到页面
        ReactDOM.render(VDOM, document.getElementById("app"))


    </script>

</body>

</html>

保存查看一下运行效果。

在这里插入图片描述

OK，是完全没有问题的。

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

注释中说了，那个虚拟 dom 创建的时候直接写标签，不用写引号，我们写一下看会有什么后果。

    <!-- 此处必须写 text/babel -->
    <script type="text/babel">
        // 1.创建虚拟dom，我们用引号引起来，变成字符串
        const VDOM = '<h1 id="user"><span>我是𝒆𝒅.</span></h1>'
        // 2. 渲染虚拟dom到页面
        ReactDOM.render(VDOM, document.getElementById("app"))
    </script>

保存看效果。

在这里插入图片描述

我们可以看到，如果我们使用引号包裹起来的话，直接把内容打印出来了，没意义了，失败！

总结：定义虚拟DOM时，不要写引号。

读取变量渲染内容

我们上面的案例都是把数据写死的，我们想通过读取变量的方式展示数据怎么操作？下面代码：

    <!-- 此处必须写 text/babel -->
    <script type="text/babel">
        // 创建变量
        const id = 'User'
        const data = '我是𝒆𝒅.'
        // 1. 创建虚拟dom
        const VDOM = ( // 此处一定不要写双引号，因为不是字符串。
            <h1 id={id.toLowerCase()}>
                <span>{data}</span>
            </h1>)
        // 2. 渲染虚拟dom到页面
        ReactDOM.render(VDOM, document.getElementById("app"))
    </script>

保存刷新看结果！

在这里插入图片描述

看到 id 和 内容都从变量里面读取成功了。

总结： 标签中使用 JS 表达式时，要使用 { } 将数据包裹起来。

设置样式

比如说，我们有一个样式，背景色是蓝色，我们想设置给 h1 标签，怎么实现？看代码！

<!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>jsx语法规则</title>
    <style>
        .wjw-h {
            background-color: aqua;
        }
    </style>
</head>

<body>

    <!-- 准备好一个容器 -->
    <div id="app"></div>
    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom 用于支持 react 操作 dom -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入 label，用于将 jsx 转化为 js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <!-- 此处必须写 text/babel -->
    <script type="text/babel">
        // 创建变量
        const id = 'User'
        const data = '我是𝒆𝒅.'
        // 1. 创建虚拟dom
        const VDOM = ( // 此处一定不要写双引号，因为不是字符串。
            <h1 class="wjw-h" id={id.toLowerCase()}>
                <span>{data}</span>
            </h1>)
        // 2. 渲染虚拟dom到页面
        ReactDOM.render(VDOM, document.getElementById("app"))
    </script>

</body>

</html>

我们直接写了一个 样式，然后在创建 h1 标签的时候给他设置一下 class，保存刷新看效果。

在这里插入图片描述

好的，样式就设置上去了.....吗？

看效果确实是设置上去了，但是我们仔细看一下控制台，他居然报错了。

在这里插入图片描述

这是肿么情况？其实我这个版本报警告，有的低版本直接报错，有的最新版本其实已经解决这个警告了，其实根版本有关系。 报这个警告的原因是因为啥呢，警告说的很清晰了，就是 JSX 使用 class 设置样式的时候，不要使用 class，要使用 className。我们换一下，刷新保存看效果。

    <!-- 此处必须写 text/babel -->
    <script type="text/babel">
        // 创建变量
        const id = 'User'
        const data = '我是𝒆𝒅.'
        // 1. 创建虚拟dom
        const VDOM = ( // 此处一定不要写双引号，因为不是字符串。
            <h1 className="wjw-h" id={id.toLowerCase()}>
                <span>{data}</span>
            </h1>)
        // 2. 渲染虚拟dom到页面
        ReactDOM.render(VDOM, document.getElementById("app"))
    </script>

保存刷新 在这里插入图片描述

我们可以看到样式设置完成了，而且控制台现在也没有报那个错误，完成！

为啥不能是 class 哈，简单一说，因为 class 是 ES6 里面定义类的关键字，为的是防止歧义。

总结：样式的类名指定时，不要用 class，而是用 className。

设置内联样式

上面我们是使用的外部样式，通过 class 属性设置的，我现在不了，我想使用内联样式，直接在标签上写，怎么操作？看代码：

    <!-- 此处必须写 text/babel -->
    <script type="text/babel">
        // 创建变量
        const id = 'User'
        const data = '我是𝒆𝒅.'
        // 1. 创建虚拟dom
        const VDOM = ( // 此处一定不要写双引号，因为不是字符串。
            <h1 className="wjw-h" id={id.toLowerCase()}>
                <span style="color: red">{data}</span>
            </h1>)
        // 2. 渲染虚拟dom到页面
        ReactDOM.render(VDOM, document.getElementById("app"))
    </script>

我们直接在标签添加上内联样式，保存刷新看结果。

在这里插入图片描述 我们发现直接报错了，八嘎！

正确的写法是这个样子的，其实报错信息也提示了，应该这样写：

    <!-- 此处必须写 text/babel -->
    <script type="text/babel">
        // 创建变量
        const id = 'User'
        const data = '我是𝒆𝒅.'
        // 1. 创建虚拟dom
        const VDOM = ( // 此处一定不要写双引号，因为不是字符串。
            <h1 className="wjw-h" id={id.toLowerCase()}>
                <span style={{color: 'red'}}>{data}</span>
            </h1>)
        // 2. 渲染虚拟dom到页面
        ReactDOM.render(VDOM, document.getElementById("app"))
    </script>

刷新保存，看效果！

在这里插入图片描述

样式修改了，而且也没有报错。主要如果是多单词的话要用驼峰写法，比如 font-size 要写为 fontSzie。

总结： 内敛样式要用 style = {{ key : value }} 方式写。

JSX只能有一个根标签

一个案例说明，比如说我们现在加一个input 输入框。看代码：

    <!-- 此处必须写 text/babel -->
    <script type="text/babel">
        // 创建变量
        const id = 'User'
        const data = '我是𝒆𝒅.'
        // 1. 创建虚拟dom
        const VDOM = ( // 此处一定不要写双引号，因为不是字符串。
            <h1 className="wjw-h" id={id.toLowerCase()}>
                <span style={{color: 'red'}}>{data}</span>
            </h1>
            <Input type="text"></Input>
            )
        // 2. 渲染虚拟dom到页面
        ReactDOM.render(VDOM, document.getElementById("app"))
    </script>

上面代码看似没问题哈，但是我给你截个编辑器的图：

在这里插入图片描述 为啥飙红呢？因为除了 最外边的 h1 标签，还有一个 input 标签，这就不是一个根标签了，这是两个了。JSX 不可以！！

怎么解决呢？学习过 vue 的应该了解，写一个大的 div 把这些标签都给包裹一下。

    <!-- 此处必须写 text/babel -->
    <script type="text/babel">
        // 创建变量
        const id = 'User'
        const data = '我是𝒆𝒅.'
        // 1. 创建虚拟dom
        const VDOM = ( // 此处一定不要写双引号，因为不是字符串。
            <div>
                <h1 className="wjw-h" id={id.toLowerCase()}>
                    <span style={{ color: 'red' }}>{data}</span>
                </h1>
                <input type="text"></input>
            </div>
        )
        // 2. 渲染虚拟dom到页面
        ReactDOM.render(VDOM, document.getElementById("app"))
    </script>

编辑器也不报错了。

在这里插入图片描述

而且我们想要的效果也出来了。

在这里插入图片描述

总结：虚拟 DOM 只允许出现一个根标签，且所有标签必须闭合。

虚拟DOM 中的标签

这个啥意思呢？就是虚拟 DOM 中可以添加什么内容，通过上面的案例我们可以稍微总结一下，虚拟 dom 中添加的是 html 标签！这句话其实是不对的， 因为你想嘛，html 标签中什么时候可以添加 js 表达式了，所以说添加的不是 html 标签，而是 jsx 标签，只不过在渲染的时候会把 jsx 标签转换为 html 标签。为什么这么说，看下面代码。

    <!-- 此处必须写 text/babel -->
    <script type="text/babel">
        // 创建变量
        const id = 'User'
        const data = '我是𝒆𝒅.'
        // 1. 创建虚拟dom
        const VDOM = ( // 此处一定不要写双引号，因为不是字符串。
            <div>
                <h1 className="wjw-h" id={id.toLowerCase()}>
                    <span style={{ color: 'red' }}>{data}</span>
                </h1>
                <input type="text"></input>
                <wjw>我是wjw</wjw>
            </div>
        )
        // 2. 渲染虚拟dom到页面
        ReactDOM.render(VDOM, document.getElementById("app"))
    </script>

看代码，我们在虚拟dom 中写了一个 <wjw></wjw> 的标签。在 html 当中可没有 标签这个东西，但是保存刷新之后，依旧是可以展示渲染的，我们看一下。

在这里插入图片描述

看到标签渲染了，数据也在页面展示了，我去，这么神奇？其实我写了 标签，浏览器也渲染了，但是不代表这样写时可以的哈，因为控制台已经报错了。

在这里插入图片描述 为啥呢？学了组件就知道了哈，先总结。

总结： 关于标签首字母： 1. 若为小写字母开头，则将该标签转为 html 中同名元素，若 html 中无同名元素则报错。 2. 若为大写字母开头，react 就去渲染对应的组件，若没有组件，嘿嘿，报错！

好了， 今天的内容先暂时这样，不说了，下篇博客见！

在这里插入图片描述

最后和大家分享一个小段子。

有一个人问：“为啥我发现有的前端跑去学后端，有的后端又跑去学前端，前后端不是早就分离了吗？为啥这么卷？”

有一个人回答说：“这不是卷，因为项目前后端分离了，但是人没有分离.....” 共勉~ 加油！

【本篇博文相关代码资料】：我是𝒆𝒅. 的 gitee

avatar
文章
阅读
粉丝