2、React：React的 JSX 语法规则介绍

最新推荐文章于 2024-10-18 17:51:23 发布

Surplus...

最新推荐文章于 2024-10-18 17:51:23 发布

阅读量172

点赞数

分类专栏： React 文章标签： react js javascript

原文链接：https://www.bilibili.com/video/BV1wy4y1D7JT?p=7

版权

React 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文深入介绍了React中的JSX语法，包括JSX的基本概念、语法规则和使用注意事项。通过实例展示了如何创建和渲染虚拟DOM，以及如何处理样式和内联样式。此外，还提供了JSX的实战练习，演示了如何利用JSX动态渲染数组数据。文章总结了JSX的主要特点，强调了其在React开发中的重要性。

摘要由CSDN通过智能技术生成

文章目录

JSX定义

全称：JavaScript XML
类似：React定义的一种类似于XML的JS扩展语法：JS+XML
本质：是React.createElement(component，props，...children)方法的语法糖
作用：用来简化创建虚拟 DOM
标签名任意:：HTML标签或其它标签
标签属性任意：HTML标签属性或其它
参考网站：网站

JSX语法规则

定义虚拟DOM时，不要写引号
标签中如果需要混入JS表达式时，需要使用{ }

	<script type="text/babel">
        const data = 'Hello,React-JSX'
        //1.创建虚拟DOM
        const VDOM = (
            <h1 id="jsx">
                <span>{data}</span>
            </h1>
        )
        //2.渲染虚拟DOM到页面
        ReactDOM.render(VDOM,document.getElementById('test'))
    </script>

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

<head>
    <style>
        .title{
            background-color: aqua;
            width: 500px;
        }
    </style>
</head>

<body>
    <!-- 准备好一个"容器" -->
    <div id="test"></div>

    <script type="text/babel">
        //1.创建虚拟DOM
        const VDOM = (
            <h1 id="jsx" className='title'>
                <span>Hello,React-JSX</span>
            </h1>
        )
        //2.渲染虚拟DOM到页面
        ReactDOM.render(VDOM,document.getElementById('test'))
    </script>
</body>

内联样式(在JSX语法中使用)，要使用style={{key：value}}的形式去写。

    <script type="text/babel">
        //1.创建虚拟DOM
        const VDOM = (
            <h1 id="jsx" className='title'>
                <span style={{color:'white',fontSize:'50px'}}>Hello,React-JSX</span>
            </h1>
        )
        //2.渲染虚拟DOM到页面
        ReactDOM.render(VDOM,document.getElementById('test'))
    </script>

JSX中只能有一个根标签
标签必须闭合<span></span>
标签首字母规则
- 如果是小写字母开头，则将该标签转为html中同名的元素，若html中无该标签对应的同名元素，则报错
- 如果是大写字母开头，React就去渲染对应的组件，若组件没有定义，则报错

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>
</head>
<body>
    <!-- 准备好一个"容器" -->
    <div id="test"></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>
    <!-- 引入babel,用于将JSX转为JS -->
    <script type="text/JavaScript" src="../js/babel.min.js"></script>
 
    <script type="text/babel">
        //模拟一些数据
        const data = ['学习的第一天','学习的第二天','学习的第三天']
        //1.创建虚拟DOM
        const VDOM = (
            <div>
                <h1>学习React很开心</h1>
                <ul>
                    {
                        data.map((item,index)=>{
                            return <li key={index}>{item}</li>
                        })
                    }
                </ul>
            </div>
        )
        //2.渲染虚拟DOM到页面
        ReactDOM.render(VDOM,document.getElementById('test'))
    </script>
</body>
</html>

效果

在这里插入图片描述

总结

在JSX中可以嵌套多个HTML标签，只需要使用div元素包裹起来即可

    <script type="text/babel">
        //1.创建虚拟DOM
        const VDOM = (
            <div>
                <h1 id="jsx" className='title'>
                <span style={{color:'white',fontSize:'50px'}}>Hello,React-JSX</span>
            </h1>
            <input type="text"/>
            </div>
        )
        //2.渲染虚拟DOM到页面
        ReactDOM.render(VDOM,document.getElementById('test'))
    </script>

在 JSX中使用 JavaScript表达式。表达式写在花括号 {} 中。
在 JSX中不能使用 if else 语句，但可以使用 conditional (三元运算) 表达式来替代。
React推荐使用内联样式。可以使用 camelCase(驼峰) 语法来设置内联样式.。React 会在指定元素数字后自动添加px。
JSX允许在模板中插入数组，数组会自动展开所有成员

    <script type="text/babel">
        var arr = [
            <h1>张三</h1>,
            <h1>李四</h1>
        ]
        //1.创建虚拟DOM
        const VDOM = (
            <div>
                <h1>{arr}</h1>
            </div>
        )
        //2.渲染虚拟DOM到页面
        ReactDOM.render(VDOM,document.getElementById('test'))
    </script>