持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情

Jsx 语法

JSX是基于 JavaScript + XML 的一个扩展语法。

这种语法最先在React中使用

代码

创建一个虚拟dom并渲染到Html页面

<!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">
    <style>
        .title{
            background-color: aquamarine;
        }
    </style>
    <title>学习React</title>
</head>
<body>
    <div id="test"></div>
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/babel">
        const myId = 'Hello'
        const myData = 'boomxiakalaka'
        const VDOM =(
           <h2 id={myId.toLowerCase()} className='title'>
                <span style={{color:'red',fontSize:'100px'}}>{myData.toLowerCase()}</span>
            </h2>

       )
        ReactDOM.render(VDOM,document.getElementById('test'))

    </script>
</body>
</html>

总结

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

看上面的代码const VDOM = (...)用的是括号, 假如使用的是''就会把引号里面所有的内容当作成字符串处理渲染到浏览器,不会识别任何的Html标签

标签种混入JS表达式时要用{}

上面代码使用了.toLowerCase()方法,在Javascript中是把英文字符转为小写的方法,其中的变量myId和myData使用了jsx语法定义的变量，跟js一样没有区别。

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

h2标签种使用className定义了一个类名,正确匹配到了在html文件上方使用内部样式定义的style样式,把h2标签背景色改成了绿色,现在看下使用class会报什么错:

虽然报错了,但是实际还是有效果

内联样式,要用style={{key:value}}的形式去写

内联样式定义了两个css效果，上图可以看出来是正常的，这个还比较特别，但是不常用，只是需要注意一下就行了

只有一个根标签

在VDOM这个变量定义了一个虚拟dom,但是最外层只有一个h2标签，假如再加一个同级的任何标签就会报错,我们来看下报什么错:

标签必须闭合

标签必须闭合，这是开发规范和尝试，但是我自己尝试了一下，在jsx里使用br标签需要这样写才不会报错: <br>
在普通的html中随意下面两种都不会报错: <br> ,</br> 所以说在jsx中是非常严格的,不管是自闭合标签还是非自闭合标签都要严格遵守闭合要求

标签首字母

若小写字母开头,则将该标签转为html种同名元素,若html种无该标签对应的同名元素,则报错

上面代码中只有两个标签h2和span，首字母都是小写,都是正常普通的的html，假如不是就会报错，要注意的是在普通的html文件中使用大写的字母的标签是不会报错的,例如:

在jsx中使用报错:

若大写字母开头,react就去渲染对应的组件,若组件没有定义则报错

组件分为函数式组件和类组件，我们后面会了解到组件是React一个必要的东西

React 学习笔记（2）认识jsx语法