【React】JSX规则

JSX规则

1. 只能返回一个根元素

如果想要在一个组件中包含多个元素,需要用一个父标签把它们包裹起来。例如,你可以使用一个 <div> 标签或者用 <></> 元素来代替:

JSX标签需要被一个父元素包裹的原因

JSX 虽然看起来很像 HTML,但在底层其实被转化为了 JavaScript 对象,你不能在一个函数中返回多个对象,除非用一个数组把他们包装起来。这就是为什么多个 JSX 标签必须要用一个父元素或者 Fragment 来包裹。

2. 标签必须闭合

JSX 要求标签必须正确闭合。像 <img> 这样的自闭合标签必须书写成 <img />,而像 <li>oranges 这样只有开始标签的元素必须带有闭合标签,需要改为 <li>oranges</li>

3. 使用驼峰式命名法给属性命名

JSX 最终会被转化为 JavaScript,而 JSX 中的属性也会变成 JavaScript 对象中的键值对。在你自己的组件中,经常会遇到需要用变量的方式读取这些属性的时候。但 JavaScript 对变量的命名有限制。例如,变量名称不能包含 - 符号或者像 class 这样的保留字。

这就是为什么在 React 中,大部分 HTML 和 SVG 属性都用驼峰式命名法表示。例如,需要用 marginTop 代替 margin-top。由于 class 是一个保留字,所以在 React 中需要用 className 来代替。参考 DOM 属性中的命名

一个正确的JSX格式:

export default function TodoList() {return (<><h1>待办事项</h1><img src="https://i.imgur.com/yXOvdOSs.jpg" alt="Hedy Lamarr" className="photo" /><ul><li>1111</li><li>2222</li><li>3333</li></ul></>);
}

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

教材下载 3.2.5| 国家中小学智慧教育平台下载器,支持预览

教材下载是一款国家中小学智慧教育平台的下载器&#xff0c;绿色免安装&#xff0c;用户只需解压后双击exe文件即可使用。软件涵盖了小学、初中、高中以及特殊教育的教材内容&#xff0c;并支持选择不同的学科和版本。所有教材均支持在线预览&#xff0c;用户还可以下载PDF文件…

系统架构(01架构的特点,本质...)

目录 学习前言 一、软件架构简介 二、系统复杂性的来源与应对 三、大型网站的特点 四、大型网站架构目标 五、参考文献 学习前言 本节总结下架构相关的基础知识&#xff1a;概述&#xff0c;特点&#xff0c;目标&#xff0c;本质... 一、软件架构简介 所谓架构&#x…

飞凌嵌入式FET527N-C核心板现已适配Android 13

飞凌嵌入式FET527N-C核心板现已成功适配Android13&#xff0c;新系统的支持能够为用户提供更优质的使用体验。那么&#xff0c;运行Android13系统的FET527N-C核心板具有哪些突出的优势呢&#xff1f; 1、性能与兼容性提升 飞凌嵌入式FET527N-C核心板搭载了全志T527系列高性能处…

如何借助AI 来提高开发效率

前言 随着人工智能&#xff08;AI&#xff09;技术的快速发展&#xff0c;特别是大规模语言模型&#xff08;如 GPT 系列&#xff09;的崛起&#xff0c;软件开发领域正在经历一场革命。AI 大模型不仅在代码生成方面展现出强大的能力&#xff0c;还在测试、维护和创新等多个环…

C++ 高效率整型大数运算项目优化——内置类型存储与计算

C 高效率整型大数运算项目优化——内置类型存储与计算 一、前言二、优化设计分析类的设计 三、设计实现加法减法乘法对于 lint&#xff1a;对于 iint&#xff1a; 左移与右移左移右移 除法基本除法借用内置类型计算第一种情况第二种情况其他情况区间定位二分计数内置类型求近似…

Qt教程(007):资源文件添加

文章目录 7.1 创建新的项目7.2 添加资源文件7.2 设置页面7.1 创建新的项目 选择创建项目类型 输入项目名称 勾选UI界面 7.2 添加资源文件 选中项目名称,右键,选择【Add New】 添加资源文件 选择Qt Resource File文件

利用轻易云高效集成旺店通与金蝶云星空销售出库单

重跑数据—分销旺店通销售出库单>金蝶销售出库单&#xff08;正常销售&刷单&#xff09;(ok) 在企业信息化管理中&#xff0c;数据的准确性和及时性至关重要。本文将分享一个实际案例&#xff0c;展示如何通过轻易云数据集成平台&#xff0c;将旺店通企业奇门的数据高效…

CAN总线协议

电气特性 高速CAN&#xff1a;电压差为0V时表示逻辑1&#xff08;隐性电平&#xff09;&#xff0c;电压差为2V时表示逻辑0&#xff08;显性电平&#xff09;&#xff0c;速率&#xff1a;125Kbps&#xff5e;1Mbps。低速CAN&#xff1a;电压差为-1.5V时表示逻辑1&#xff08;…

Nginx简易配置将内网网站ssh转发到外网

声明&#xff1a;本内容仅供交流学习使用&#xff0c;部署网站上线还需要根据有关规定申请域名以及备案。 背景 在内网的服务器有一个运行的网页&#xff0c;现使用ssh反向代理&#xff0c;将它转发到外网的服务器。 但是外网的访问ip会被ssh反向代理拦截 所以使用Nginx进行…

决策树算法

决策树算法对数据进行分类的一种算法&#xff0c;根据数据的属性进行分类&#xff0c;例如对鸢尾花进行分类&#xff0c;可以根据花瓣大小进行分类。决策树可以使用信息熵和基尼指数进行数据分类。 信息熵&#xff1a;信息熵越低&#xff0c;样本不确定性越小&#xff0c;对应…

程序员学长 | 最强总结,机器学习中处理不平衡数据集的五种方法!!

本文来源公众号“程序员学长”&#xff0c;仅用于学术分享&#xff0c;侵权删&#xff0c;干货满满。 原文链接&#xff1a;最强总结&#xff0c;机器学习中处理不平衡数据集的五种方法&#xff01;&#xff01; 今天给大家分享处理不平衡数据集的常用方法。 在开始之前&…

08 Oracle数据库故障应对与恢复策略:全面掌握RMAN恢复方法

文章目录 Oracle数据库故障应对与恢复策略&#xff1a;全面掌握RMAN恢复方法一、故障场景及恢复策略1.1 实例失败1.2 介质故障1.3 数据丢失 二、RMAN恢复方法详解2.1 全库恢复2.2 增量恢复2.3 时间点恢复 三、实践与总结 Oracle数据库故障应对与恢复策略&#xff1a;全面掌握RM…

线段树专题(1)

线段树 线段树可维护的信息类型 线段树可以维护的信息类型&#xff0c;父范围上的某个信息&#xff0c;可以用O(1)的时间&#xff0c;从子范围的信息加工得到&#xff0c;例如求某个范围的最大最小值&#xff0c;给某个范围每个位置加相同的数字&#xff0c;进行求和。 0到2范…

Linux应用开发基础知识——tslib应用编程(十一)

文章目录 一、tslib是啥&#xff1f;二、tslib 框架分析三、交叉编译、测试 tslib3.1、交叉编译tslib&#xff08;1&#xff09;设置交叉编译工具链&#xff08;2&#xff09;进入tslib目录&#xff08;3&#xff09;安装工具链&#xff08;4&#xff09;确定工具链中头文件、库…

MySQL必会知识精华6(组合WHERE子句)

我们的目标是&#xff1a;按照这一套资料学习下来&#xff0c;大家可以完成数据库增删改查的实际操作。同时轻松应对面试或者笔试题中MySQL相关题目。 上篇文章我们先做一下数据库的where条件过滤的方法&#xff0c;都是单个条件的过滤。本篇文章主要介绍查询的组合WHERE子句的…

系统架构师2023版:习题

架构设计基础 计算机基础 目前处理器市场中存在 CPU 和 DSP 两种类型的处理器&#xff0c;分别用于不同的场景&#xff0c;这两种处理器具有不同的体系结构&#xff0c;DSP采用()。 A.冯诺依曼结构 B.哈佛结构 C.FPGA 结构 D.与 GPU 相同的结构 解析:…

企微SCRM价格解析及其性价比分析

内容概要 在如今的数字化时代&#xff0c;企业对于客户关系管理的需求日益增长&#xff0c;而企微SCRM&#xff08;Social Customer Relationship Management&#xff09;作为一款新兴的客户管理工具&#xff0c;正好满足了这一需求。本文旨在为大家深入解析企微SCRM的价格体系…

RocketMQ学习笔记

RocketMQ笔记 文章目录 一、引言⼆、RocketMQ介绍RocketMQ的由来 三、RocketMQ的基本概念1 技术架构2 部署架构 四、快速开始1.下载RocketMQ2.安装RocketMQ3.启动NameServer4.启动Broker5.使⽤发送和接收消息验证MQ6.关闭服务器 五、搭建RocketMQ集群1.RocketMQ集群模式2.搭建主…

基于AI大模型开发应用层产品经典解决方案:ASR+LLM+TTS

在 AI 大模型开发领域&#xff0c;ASR&#xff08;自动语音识别&#xff09;LLM&#xff08;大语言模型&#xff09;TTS&#xff08;语音合成&#xff09;的解决方案是一种将语音输入、语言理解和语音输出整合在一起的技术架构&#xff0c;能够实现智能的语音交互应用。 方案介…

tree-transfer-vue3插件(树形数据穿梭框)

tree-transfer-vue3 效果图 简介 tree-transfer-vue3 是一个基于 VUE 和 element-plus 的树形穿梭框组件&#xff0c;使用前请确认已经引入element-plus&#xff01; 此组件功能类似于element-plus的transfer组件&#xff0c;但是里面的数据是树形结构&#xff01; 实际上&am…