百度360必应搜狗淘宝本站头条
当前位置:网站首页 > IT知识 > 正文

React 1、JSX使用教程

liuian 2025-03-07 20:52 10 浏览


1.JSX 是什么?

JSX(JavaScript XML)是 JavaScript 的语法扩展,用于在 React 中描述 UI 结构。它结合了 JavaScript 的表达式和 HTML 的标签语法。

优点:

  • 直观:类似于 HTML,易于理解和书写。
  • 强大:可以直接嵌入 JavaScript 表达式。
  • 高效:与 React 深度集成,优化了渲染性能。

2.基本语法

2.1 JSX 表达式的使用

JSX 可以嵌入 JavaScript 表达式,用 {} 包裹。

const name = "前端开发者";
const element = 

你好, {name}!

; // 使用变量 ReactDOM.render(element, document.getElementById('root'));

2.2 JSX 中的标签

JSX 中的标签可以是 HTML 标签,也可以是自定义组件。

function Welcome() {
  return 

欢迎来到 JSX 世界!

; } const element = ; // 自定义组件 ReactDOM.render(element, document.getElementById('root'));

2.3 JSX 中的属性

JSX 中的属性可以使用字符串或表达式。

const url = "https://www.example.com";
const element = 点击这里; // 使用表达式

ReactDOM.render(element, document.getElementById('root'));

2.4 JSX 中的样式

JSX 中的样式使用对象形式,属性名使用驼峰命名。

const style = {
  color: 'red',
  fontSize: '20px', // 驼峰命名
};

const element = 

红色文字,20px 大小

; ReactDOM.render(element, document.getElementById('root'));

2.5 JSX 中的注释

JSX 中的注释需要用 {/* */} 包裹。

const element = (
  
{/* 这是一个注释 */}

你好,JSX!

); ReactDOM.render(element, document.getElementById('root'));

3.JSX 高级用法

3.1 条件渲染

JSX 中可以使用三元运算符或 && 进行条件渲染。

const isLoggedIn = true;
const element = (
  
{isLoggedIn ?

欢迎回来!

:

请登录

} {/* 三元运算符 */} {isLoggedIn && } {/* 逻辑与 */}
); ReactDOM.render(element, document.getElementById('root'));

3.2 列表渲染

使用 map 函数渲染列表,每个元素需要一个唯一的 key。

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) => (
  
  • {number}
  • // 使用 key )); const element =
      {listItems}
    ; ReactDOM.render(element, document.getElementById('root'));

    3.3 嵌套 JSX

    JSX 可以嵌套其他 JSX。

    const element = (
      

    标题

    这是一个段落。

    • 列表项 1
    • 列表项 2
    ); ReactDOM.render(element, document.getElementById('root'));

    3.4 事件绑定

    JSX 中的事件绑定使用 on 开头的属性,如 onClick。

    function handleClick() {
      alert('按钮被点击了!');
    }
    
    const element = ; // 事件绑定
    
    ReactDOM.render(element, document.getElementById('root'));
    

    3.5 片段(Fragment)

    使用 或 <> 包裹多个元素,避免额外的 DOM 节点。

    const element = (
      
        

    标题

    这是一个段落。

    ); // 或者使用简写 const element = ( <>

    标题

    这是一个段落。

    ); ReactDOM.render(element, document.getElementById('root'));

    4.代码示例合集

    以下是 JSX 的完整示例,结合了上述特性:

    import React from 'react';
    import ReactDOM from 'react-dom';
    
    // 数据
    const user = {
      name: '前端开发者',
      age: 25,
      hobbies: ['编程', '听音乐', '跑步'],
    };
    
    // 事件处理函数
    function handleClick() {
      alert('你好,' + user.name + '!');
    }
    
    // JSX 结构
    const element = (
      

    欢迎来到 JSX 世界!

    用户名: {user.name}

    年龄: {user.age}

    兴趣爱好:

      {user.hobbies.map((hobby, index) => (
    • {hobby}
    • // 列表渲染 ))}
    {/* 条件渲染 */} {user.age >= 18 &&

    你是一个成年人。

    } {/* 片段 */} <>

    这是一个片段示例。

    ); // 渲染到 DOM ReactDOM.render(element, document.getElementById('root'));

    5.JSX 与 HTML 的区别

    1. 标签属性名:JSX 使用驼峰命名,如 className(HTML:class)。
    2. 自闭合标签:JSX 必须正确闭合,如 。
    3. 嵌入表达式:JSX 使用 {} 包裹 JavaScript 表达式。
    4. 注释语法:JSX 使用 {/* */}。

    6.总结

    特性

    示例

    描述

    表达式

    {name}

    嵌入 JavaScript 表达式

    条件渲染

    isLoggedIn &&

    欢迎

    根据条件渲染内容

    列表渲染

    map((item) =>

  • {item}
  • )

    渲染列表,使用 key

    事件绑定

    onClick={handleClick}

    绑定事件处理函数

    片段

    或 <>

    包裹多个元素,避免额外 DOM 节点

    相关推荐

    软件测试/测试开发丨Pytest 自动化测试框架(五)

    公众号搜索:TestingStudio霍格沃兹测试开发的干货都很硬核测试报告在项目中是至关重要的角色,一个好的测试报告:可以体现测试人员的工作量;开发人员可以从测试报告中了解缺陷的情况;测试经理可以...

    python爬虫实战之Headers信息校验-Cookie

    一、什么是cookie上期我们了解了User-Agent,这期我们来看下如何利用Cookie进行用户模拟登录从而进行网站数据的爬取。首先让我们来了解下什么是Cookie:Cookie指某些网站为了辨别...

    软件测试 | 结合Allure生成测试报告

    简介测试报告在项目至关重要,测试人员可以在测试报告中体现自己的工作量,开发人员可以从测试报告中了解缺陷的情况,测试经理可以从测试报告中看到测试人员的执行情况及测试用例的覆盖率,项目负责人可以通过测...

    使用FUSE挖掘文件上传漏洞(文件上传漏洞工具)

    关于FUSEFUSE是一款功能强大的渗透测试安全工具,可以帮助广大研究人员在最短的时间内迅速寻找出目标软件系统中存在的文件上传漏洞。FUSE本质上是一个渗透测试系统,主要功能就是识别无限制可执行文件上...

    第42天,我终于意识到,爬虫这条路,真的好艰难

    昨天说到学爬虫的最初四行代码,第四行中的print(res.text),我没太懂。为啥最后的输出的结果,不是显示百度网页全部的源代码呢?这个世界上永远不缺好心人。评论区的大神告诉我:因为只包含静态h...

    详解Pytest单元测试框架,轻松搞定自动化测试实战

    pytest是目前企业里面使用最多、最流行的Python的单元测试框架,那我们今天就使用这个框架来完成一个网易163邮箱登录的自动化实战案例。下面我们先把我们案例需要的工具进行相关的介绍:01pyt...

    干货|Python大佬手把手带你破解哔哩哔哩网滑动验证(上篇)

    /1前言/有爬虫经验的各位小伙伴都知道,正常我们需要登录才能获取信息的网站,是比较难爬的。原因就是在于,现在各大网站为了反爬,与爬虫机制斗智斗勇,一般的都加入了图片验证码、滑动验证码之类的干扰,让...

    Python 爬虫-如何抓取需要登录的网页

    本文是Python爬虫系列第四篇,前三篇快速入口:Python爬虫-开启数据世界的钥匙Python爬虫-HTTP协议和网页基础Python爬虫-使用requests和B...

    使用Selenium实现微博爬虫:预登录、展开全文、翻页

    前言想实现爬微博的自由吗?这里可以实现了!本文可以解决微博预登录、识别“展开全文”并爬取完整数据、翻页设置等问题。一、区分动态爬虫和静态爬虫1、静态网页静态网页是纯粹的HTML,没有后台数据库,不含程...

    从零开始学Python——使用Selenium抓取动态网页数据

    1.selenium抓取动态网页数据基础介绍1.1什么是AJAX  AJAX(AsynchronouseJavaScriptAndXML:异步JavaScript和XML)通过在后台与服务器进...

    PHP自动测试框架Top 10(php单元测试工具)

    对于很多PHP开发新手来说,测试自己编写的代码是一个非常棘手的问题。如果出现问题,他们将不知道下一步该怎么做。花费很长的时间调试PHP代码是一个非常不明智的选择,最好的方法就是在编写应用程序代码之前就...

    10款最佳PHP自动化测试框架(php 自动化测试)

    为什么测试如此重要?PHP开发新手往往不会测试自己编写的代码,我们中的大多数通过不断测试我们刚刚所编写浏览器窗口的新特性和功能来进行检测,但是当事情出现错误的时候我们往往不知道应该做些什么。为我们的代...

    自动化运维:Selenium 测试(seleniumbase搭建自动化测试平台)

    本文将以Buddy中的Selenium测试流水线示例,来看看自动化测试就是如此简单易用!Selenium是一套用于浏览器测试自动化的工具。使用Buddy专有服务,您可以直接在Buddy中运行Selen...

    Selenium自动化测试(selenium自动化测试工具)

    Selenium是一系列基于web的自动化测试工具。它提供了一系列测试函数,用于支持Web自动化测试。这些函数非常灵活,它们能够通过多种方式定位界面元素,并可以将预期结果与系统实际表现进行比较。作为一...

    技术分享 | Web自动化之Selenium安装

    本文节选自霍格沃兹测试开发学社内部教材Web应用程序的验收测试常常涉及一些手工任务,例如打开一个浏览器,并执行一个测试用例中所描述的操作。但是手工执行的任务容易出现人为的错误,也比较费时间。因此,将...