【React】JSX基础

一、简介

JSX是JavaScript XML的缩写,它是一种在JavaScript代码中编写类似HTML模板的结构的方法。JSX是React框架中构建用户界面(UI)的核心方式之一。

1.什么是JSX

JSX允许开发者使用类似HTML的声明式模板来构建组件。它结合了HTML的直观性和JavaScript的编程能力,使得开发者能够更高效地构建动态用户界面。

const message = 'this is message';function App() {return (<div><h1>this is title</h1>{message}</div>);
}

二、JSX高频场景

1.JS表达式

在JSX中,可以使用大括号{}来嵌入JavaScript表达式,包括变量、函数调用、方法调用等。

  • 使用引号传递字符串。
  • 使用JavaScript变量。
  • 函数调用和方法调用。
  • 使用JavaScript对象。

需要注意的是,某些JavaScript语句,如ifswitch、变量声明等,不属于表达式,不能直接在JSX中使用。

const message = 'this is message';
function getAge() { return 18; }function App() {return (<div><h1>this is title</h1>{'this is str'}{message}{getAge()}</div>);
}

2.列表渲染

在JSX中,可以使用JavaScript的map方法来实现列表的渲染。

const list = [{ id: 1001, name: 'Vue' },{ id: 1002, name: 'React' },{ id: 1003, name: 'Angular' }
];function App() {return (<div><ul>{list.map(item => <li key={item.id}>{item.name}</li>)}</ul></div>);
}

3.条件渲染

在React中,可以使用逻辑与运算符&&或三元表达式?:来实现条件渲染。

const flag = true;
const loading = false;function App() {return (<>{flag && <span>this is span</span>}{loading ? <span>loading...</span> : <span>this is span</span>}</>);
}

4.复杂条件渲染

对于更复杂的条件渲染,可以结合自定义函数和判断语句来实现。

const type = 1; // 0, 1, or 3function getArticleJSX() {if (type === 0) {return <div>无图模式模版</div>;} else if (type === 1) {return <div>单图模式模版</div>;} else if (type === 3) {return <div>三图模式模版</div>;}
}function App() {return (<>{getArticleJSX()}</>);
}

5.结语

JSX是React开发中不可或缺的一部分,它提供了一种强大而灵活的方式来构建用户界面。通过掌握JSX的基础知识和高频使用场景,开发者可以更高效地构建动态且响应式的Web应用。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/46228.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

TDesign组件库日常应用的一些注意事项

【前言】Element&#xff08;饿了么开源组件库&#xff09;在国内使用的普及率和覆盖率高于TDesign-vue&#xff08;腾讯开源组件库&#xff09;&#xff0c;这也导致日常开发遇到组件使用上的疑惑时&#xff0c;网上几乎搜索不到其文章解决方案&#xff0c;只能深挖官方文档或…

2024.7.17 ABAP面试题目总结

2024.7.17 用的SAP什么平台&#xff0c;S4/HANA吗&#xff0c;有用过ECC吗 S4/HANA&#xff0c;没用过ECC 会不会CDS VIEW 不会 会不会FIORI 不会 银企直连里面的逻辑了解不 不了解&#xff0c;做过&#xff0c;但是只能算很简单的修改 SAP做增强&#xff0c;如何创建…

网络安全-网络安全及其防护措施7

31.防病毒和恶意软件保护 防病毒和恶意软件防护的定义和作用 防病毒和恶意软件防护是一种保护计算机和网络免受病毒、木马、间谍软件等恶意软件侵害的安全措施。通过防护措施&#xff0c;可以检测、阻止和清除恶意软件&#xff0c;确保系统和数据的安全。其主要作用包括&…

C++右值引用和移动语义

目录 概念&#xff1a; 左值引用和右值引用 概念&#xff1a; 注意&#xff1a; 左值引用的意义 作函数参数 函数引用返回 右值引用的意义 诞生背景 移动构造 移动赋值 其他应用 万能引用和完美转发 默认的移动构造和移动赋值 概念&#xff1a; 左值&#xff1a;顾…

List数据的几种数据输出方式

一、问题引入 在Java中&#xff0c;查询List集合是一项常见的任务&#xff0c;它可以通过多种方式实现&#xff0c;以满足不同的需求。下面&#xff0c;List数据的几种数据输出方式。 二、实例 /*** 查询所有用户信息* return*/ List<User> getAllUser(); <select…

Git【撤销远程提交记录】

在实际开发中&#xff0c;你是否遇到过错误的提交了代码&#xff0c;想要删掉本次提交记录的情况&#xff0c;你可以按照如下方法实现。 1、使用 git revert 如果你想要保留历史记录&#xff0c;并且对远程仓库其他使用者的影响最小&#xff0c;你可以使用 git revert 命令。这…

conda 使用

首先要安装Miniconda的环境 下面是一下命令关于如何使用conda 查看当前环境列表&#xff1a; conda env list 创建环境不指定路径&#xff1a; conda create --name p38 python3.8 创建新环境并指定路径&#xff1a; conda create --prefix /data/p38 python3.8激活新环境&a…

VulnHub:CK00

靶场搭建 靶机下载地址&#xff1a;CK: 00 ~ VulnHub 下载后&#xff0c;在vmware中打开靶机。 修改网络配置为NAT 处理器修改为2 启动靶机 靶机ip扫描不到的解决办法 靶机开机时一直按shift或者esc直到进入GRUB界面。 按e进入编辑模式&#xff0c;找到ro&#xff0c;修…

Kubernetes网络性能测试-calico插件环境

Kubernetes 网络性能测试-calico插件环境 本次主要针对calico网络插件k8s集群的网络性能进行摸底及测试方法探索实践。 1. 测试准备 1.1 测试环境 测试环境为VMware Workstation虚拟机搭建的一套K8S环境&#xff0c;版本为1.28.2&#xff0c;网络插件使用calico&#xff0c…

6Python的Pandas:数据读取与输出

Pandas是一个强大的Python数据分析库&#xff0c;提供了读取和输出数据的多种功能。以下是一些常见的数据读取与输出方法&#xff1a; 1. 读取CSV 读取数据 从CSV文件读取数据 import pandas as pd# 读取CSV文件 df pd.read_csv(file_path.csv) print(df.head())从Excel文…

Flutter 状态管理调研总结

一, 候选状态管理组件简介 0. flutter_hooks 一个 React 钩子在 Flutter 上的实现&#xff1a;Making Sense of React Hooks 钩子是一种用来管理 Widget 生命周期的新对象&#xff0c;以减少重复代码、增加组件间复用性&#xff0c;允许将视图逻辑提取到通用的用例中并重用&…

思路|如何利用oneNote钓鱼?

本文仅用于技术研究学习&#xff0c;请遵守相关法律&#xff0c;禁止使用本文所提及的相关技术开展非法攻击行为&#xff0c;由于传播、利用本文所提供的信息而造成任何不良后果及损失&#xff0c;与本账号及作者无关。 本文来源无问社区&#xff0c;更多实战内容&#xff0c;…

[python]pycharm设置清华源

国内镜像源有以下几个&#xff0c;因为都是国内的&#xff0c;基本速度差不了太多。 清华&#xff1a;https://pypi.tuna.tsinghua.edu.cn/simple 阿里云&#xff1a;http://mirrors.aliyun.com/pypi/simple/ 中国科技大学 https://pypi.mirrors.ustc.edu.cn/simple/ 豆瓣&…

针对【module_or_function】的单元测试,全面覆盖可能的【edge_cases】

针对【module_or_function】的单元测试&#xff0c;全面覆盖可能的【edge_cases】 编写单元测试是为了验证代码模块或函数的正确性和鲁棒性。对于module_or_function&#xff0c;首先需要确定这个模块或函数的具体功能和预期输入范围。一个好的单元测试应该包括以下几个步骤&a…

高并发服务器-使用多线程(Multi-Thread)实现【C语言】

在上期的socket套接字的使用详解中&#xff08;socket套接字的使用详解&#xff09;最后实现的TCP服务器只能处理一个客户端的请求发送&#xff0c;当有其他客户端请求连接时会被阻塞。为了能同时处理多个客户端的连接请求&#xff0c;本期使用多线程的方式来解决。 程序流程 …

爬虫案例(读书网)(下)

上篇链接&#xff1a; CSDN-读书网https://mp.csdn.net/mp_blog/creation/editor/139306808 可以看见基本的全部信息&#xff1a;如(author、bookname、link.....) 写下代码如下&#xff1a; import requests from bs4 import BeautifulSoup from lxml import etreeheaders{…

scottplot5 中 使用signalXY图,如何更新数据?

&#x1f3c6;本文收录于《CSDN问答解答》专栏&#xff0c;主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案&#xff0c;希望能够助你一臂之力&#xff0c;帮你早日登顶实现财富自由&#x1f680;&#xff1b;同时&#xff0c;欢迎大家关注&&收藏&…

总部下达任务时,如何保证员工的执行力?

执行力是个体基于战略目标&#xff0c;有效整合利用资源&#xff0c;保质保量完成预定目标的操作能力&#xff0c;员工执行力的高低是企业完成效益、成果转化的关键。执行力包含完成任务的意愿、完成能力、完成程度三个维度&#xff0c;其中意愿是基础和出发点&#xff0c;能力…

物联网与通信技术

查了很多资料&#xff0c;也夹杂着一些自己的见解。此篇文章仅探讨三个问题&#xff1a;物联网与通信技术的关系&#xff1b;5G为物联网带来了什么&#xff0c;物联网真的需要5G吗&#xff1b;物联网发展的现实问题。 1、物联网与通信技术的关系 最近几年&#xff0c;物联网的…

Apache POI 使用Java处理Excel数据 进阶

1.POI入门教程链接 http://t.csdnimg.cn/Axn4Phttp://t.csdnimg.cn/Axn4P建议&#xff1a;从入门看起会更好理解POI对Excel数据的使用和处理 记得引入依赖&#xff1a; <dependency><groupId>org.apache.poi</groupId><artifactId>poi</artifactI…