React---jsx语法规则详解

最新推荐文章于 2024-01-18 09:27:23 发布

杜～｜

最新推荐文章于 2024-01-18 09:27:23 发布

阅读量517

点赞数 3

分类专栏： React 文章标签： javascript 前端开发语言 reactjs

本文链接：https://blog.csdn.net/qq_53458653/article/details/127009606

版权

React 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

jsx介绍

JSX=javascript xml，就是将javascript和xml结合的一种书写语法，是javascript的扩展。官方定义：类XML语法的ECMAscript的扩展。
xml是早期的一种存储数据的格式，是一种要求语法非常严谨的数据格式 。所以jsx对语法的要求也很严格。

jsx语法

基本语法

1.多行标签需要有一个根容器进行包裹。（最外边最好可以再使用圆括号括起来）

2.标签必须闭合。（特指单标签）

注意：写表格时，需要注意必须有tbody包裹tr、td，不然会报错

属性、变量、注释

小写首字母对应 HTML的标签，首字母大写对应的是组件名。

jsx在遇见{}时会当js表达式解析，遇见<>会当html解析。{变量}

注释：在jsx使用注释需要用多行注释{/* 注释内容*/}

<!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>Document</title>
    <script src="react.16.8.6.js"></script>
    <script src="react-dom.16.8.6.js"></script>
    <script src="babel.min.js"></script>
</head>
<body>
    <div id="demo">

    </div>
    <script type="text/babel">
        function Com (){
            let text="我是变量";
            let name="myP"
            return (
                <div>
                     //变量的基本用法
                    <p className={name}>{text}</p>
                </div>
            )
        }
        ReactDOM.render(<Com/>,document.getElementById("demo"))
    </script>
</body>
</html>

样式

行内样式
在标签内写行内样式时需要写入一个样式对象。

语法：第一个{}是jsx的语法 第二个{}是对象的语法

 <span style={{color:"red",backgroundColor:"yellow"}}>行内样式</span>

类样式

jsx中类名不能使用class来设置（因为class是js的关键字）使用className来设置

 <span className="demo">类样式</span>

杜～｜

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
React---jsx语法规则详解

能够快速了解jsx的基本语法
复制链接

扫一扫

专栏目录