React的jsx的用法

React是一个流行的JavaScript库,用于构建用户界面。它使用一种名为JSX的语法扩展来描述组件的结构和样式。JSX是React的核心语言之一,它允许开发人员在JavaScript中编写HTML,从而使代码更加简洁和易于阅读。

JSX是一种语法扩展,它允许开发人员在JavaScript中编写类似于HTML的代码。它使用类似XML的标记来描述组件的结构和样式。例如,下面是一个简单的JSX组件:

const MyComponent = () => {return (<div><h1>Hello, World!</h1><p>This is a JSX component.</p></div>);
};

在这个例子中,我们定义了一个名为MyComponent的函数组件,它返回一个包含HTML标记的JSX元素。这个元素包含一个<div>标记,其中包含一个<h1>标记和一个<p>标记。这些标记被称为“元素”,它们可以包含属性和子元素。

JSX的语法非常类似于HTML,但有一些重要的区别。首先,JSX元素必须使用尖括号< >来包围。其次,JSX属性必须使用双引号"来包围。最后,JSX元素必须以分号;结尾。

除了HTML标记外,JSX还支持JavaScript表达式。这意味着我们可以在JSX中使用变量、函数和算术运算符等JavaScript语法。例如,下面是一个使用JavaScript表达式的JSX组件:

const MyComponent = () => {const name = "John";const age = 30;return (<div><h1>Hello, {name}!</h1><p>You are {age} years old.</p></div>);
};

在这个例子中,我们定义了两个变量nameage,然后在JSX中使用它们来显示用户的姓名和年龄。我们使用花括号{ }来将JavaScript表达式嵌入到JSX中。

JSX还支持JavaScript的条件语句和循环语句。例如,下面是一个使用条件语句的JSX组件:

const MyComponent = ({ isLoggedIn }) => {return (<div>{isLoggedIn ? (<p>Welcome back!</p>) : (<p>Please log in.</p>)}</div>);
};

在这个例子中,我们定义了一个名为isLoggedIn的属性,它表示用户是否已登录。然后,我们使用条件运算符? :来根据用户是否已登录显示不同的消息。

JSX还支持JavaScript的循环语句。例如,下面是一个使用循环语句的JSX组件:

const MyComponent = ({ items }) => {return (<ul>{items.map((item) => (<li key={item.id}>{item.name}</li>))}</ul>);
};

在这个例子中,我们定义了一个名为items的属性,它是一个包含多个对象的数组。然后,我们使用Array.map()方法来遍历数组,并为每个对象创建一个<li>元素。我们还使用key属性来指定每个元素的唯一标识符,以提高性能。

jsx的{}能够放什么—表达式—值

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--使用react的环境--><script src="./js/babel.min.js"></script><script src="./js/react.development.js"></script><script src="./js/react-dom.development.js"></script><!--babel的作用就是把 react的语法转为 js语言react-dom的作用就是把 虚拟dom转为domreact.development 开发环境下的react源码-->
</head>
<body>
<!--真是的dom-->
<div id="app"></div><script type="text/babel">let classNameVal = "content"let text="刘明飞快的在回你眼前的这个未婚妻是什么情况"function add(){return "真的让人无法自拔啊!!!"}let list=["心海","甘雨","艳菲","八重"]let VDOM = (<div className={classNameVal}><p style={{color:"red",fontSize:"29px"}}>你好{classNameVal}</p><img src="./1.jpg" alt="" width="239" height="159"/>{//这里是注释/*多行注释多行注释* */}<p>{text}</p><p>{text+"看着他布灵布灵的大眼睛"}</p><p>{add()}</p><div>我的老婆们:{list.map(ele=>{return <h2>{ele}</h2>})}</div></div>)ReactDOM.render(VDOM, document.querySelector("#app"))/*在 {} 里能写什么   ---表达式---也就是值js代码 和 js表达式a. 表达式: 一个表达式会产生一个值,可以在任意需要值的地方 使用aa+520fn()list.mapb. 流程控制语句ifforswitch*/
</script></body>
</html>

总之,JSX是一种非常强大和灵活的语法扩展,它使React开发人员能够更轻松地编写和组织代码。通过使用JSX,我们可以将HTML、JavaScript和CSS等不同类型的代码组合在一起,从而创建出美观、灵活和易于维护的用户界面。

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

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

相关文章

深入理解联邦学习——联邦学习的分类:基础知识

分类目录&#xff1a;《深入理解联邦学习》总目录 在实际中&#xff0c;孤岛数据具有不同分布特点&#xff0c;根据这些特点&#xff0c;我们可以提出相对应的联邦学习方案。下面&#xff0c;我们将以孤岛数据的分布特点为依据对联邦学习进行分类。 考虑有多个数据拥有方&…

Go学习[合集]

文章目录 Go学习-Day1Go学习-Day2标识符变量基础语法字符串类型类型转换string和其他基本类型转换其他类型转stringstring转其他类型 指针类型运算符标准IO分支语句 Go学习-Day3循环语句函数声明init函数匿名函数闭包defer Go学习-Day4函数值传递&#xff0c;引用传递常用的函数…

Kotlin的遍历方法

for循环 在下面代码中1…10表示的是1到10&#xff0c;两边都是闭包&#xff0c;输出12345678910 for (i in 1..10) println(i)加上花括号也支持 for (i: Int in 1..10) {println(i)}另外&#xff0c;当对整数进行for循环时&#xff0c;Kotlin还提供了一个step函数来定义迭代的…

利用python制作AI图片优化工具

将模糊图片4K高清化效果如下&#xff1a; 优化前的图片 优化后如下图&#xff1a; 优化后图片变大变清晰了效果很明显 软件界面如下&#xff1a; 所用工具和代码&#xff1a; 1、所需软件包 网盘链接&#xff1a;https://pan.baidu.com/s/1CMvn4Y7edDTR4COfu4FviA提取码&…

【SpringMVC】工作流程及入门案例

目录 前言 回顾MVC三层架构 1. SpringMVC简介 …

Nginx安装及配置负载均衡

文章目录 官网下载Nginx解压安装常用命令配置负载均衡七层负载均衡nginx的负载均衡语法nginx的负载均衡策略故障下线和备份服务设置proxy_pass参数 官网下载Nginx http://nginx.org/en/download.html 注&#xff1a;下载稳定版&#xff0c;即Stateable Version的&#xff0c;…

《智能网联汽车自动驾驶功能测试规程》

一、 编制背景 2018 年4 月12 日&#xff0c;工业和信息化部、公安部、交通运输部联合发布《智能网联汽车道路测试管理规范(试行)》&#xff08;以下简称《管理规范》&#xff09;&#xff0c;对智能网联汽车道路测试申请、审核、管理以及测试主体、测试驾驶人和测试车辆要求等…

【Kafka】ZooKeeper启动失败报错java.net.BindException: Address already in use: bind

问题描述 Kafka 2.8.1 ZooKeeper启动失败。 zookeeper-server-start.bat ../../config/zookeeper.properties[2023-09-04 18:21:49,497] INFO binding to port 0.0.0.0/0.0.0.0:2181 (org.apache.zookeeper.server.NIOServerCnxnFactory) [2023-09-04 18:21:49,498] ERROR Un…

船舶稳定性和静水力计算——绘图体平面图,静水力,GZ计算(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

Qt鼠标点击事件处理:显示鼠标点击位置(完整示例)

Qt 入门实战教程&#xff08;目录&#xff09; 前驱文章&#xff1a; Qt Creator 创建 Qt 默认窗口程序&#xff08;推荐&#xff09; 什么是事件 事件是对各种应用程序需要知道的由应用程序内部或者外部产生的事情或者动作的通称。 事件&#xff08;event&#xff09;驱动…

RHCA之路---EX280(4)

RHCA之路—EX280(4) 1. 题目 Use the S2I functionality of your OpenShift instance to build an application in the rome project Use the Git repository at http://services.lab.example.com/php-helloworld for the application source Use the Docker image labeled re…

java八股文面试[数据库]——mysql主从复制

什么是mysql的主从复制&#xff1f; MySQL 主从复制是指数据可以从一个MySQL数据库服务器主节点复制到一个或多个从节点。MySQL 默认采用异步复制方式&#xff0c;这样从节点不用一直访问主服务器来更新自己的数据&#xff0c;数据的更新可以在远程连接上进行&#xff0c;从节点…

[系统安全] 五十三.DataCon竞赛 (2)2022年DataCon涉网分析之恶意样本IOC自动化提取数据集详解

您可能之前看到过我写的类似文章,为什么还要重复撰写呢?只是想更好地帮助初学者了解病毒逆向分析和系统安全,更加成体系且不破坏之前的系列。因此,我重新开设了这个专栏,准备系统整理和深入学习系统安全、逆向分析和恶意代码检测,“系统安全”系列文章会更加聚焦,更加系…

力扣71. 简化路径

71. 简化路径 给你一个字符串 path &#xff0c;表示指向某一文件或目录的 Unix 风格 绝对路径 &#xff08;以 / 开头&#xff09;&#xff0c;请你将其转化为更加简洁的规范路径。 在 Unix 风格的文件系统中&#xff0c;一个点&#xff08;.&#xff09;表示当前目录本身&a…

【Spring Boot】使用MyBatis注解实现数据库操作

使用MyBatis注解实现数据库操作 MyBatis还提供了注解的方式&#xff0c;相比XML的方式&#xff0c;注解的方式更加简单方便&#xff0c;无须创建XML配置文件。接下来好好研究注解的使用方式。 1.XML和注解的异同 1&#xff09;注解模式使用简单&#xff0c;开发效率高&#…

C++类和对象

文章目录 C类和对象封装类的封装性类的初识构造和析构构造和析构函数定义构造的分类以及调用深拷贝与浅拷贝初始化列表与成员对象对象成员的初始化列表 explicit 关键字动态对象的创建对象的创建new operator给基本对象申请空间给对象申请空间 静态成员静态成员变量静态成员函数…

【SpringSecurity】十一、SpringSecurity集成JWT实现token的方法与校验

文章目录 1、依赖与配置2、JWT工具类3、认证成功处理器4、创建JWT过滤器5、安全配置类 1、依赖与配置 添加JWT的maven依赖&#xff1a; <!-- 添加jwt的依赖 --> <dependency><groupId>com.auth0</groupId><artifactId>java-jwt</artifactId…

NC后端扩展开发

前言 在日常的工作中&#xff0c;会遇到各种各样的需要进行扩展开发的需求&#xff0c;可以使用系统预留的扩展开发机制来实现&#xff0c;避免修改源码。因NC产品已迭代至BIP版本&#xff0c;所以前端扩展方式就再进行不赘述了&#xff0c;本文主要介绍后端扩展开发方式&…

50个Linux常用命令行快捷键(大部分适配Mac OS)

50个Linux常用命令行快捷键 &#xff08;大部分适配Mac OS&#xff09; 移动光标到行首&#xff1a;Ctrl a移动光标到行尾&#xff1a;Ctrl e移动光标到上一个单词的开头&#xff1a;Ctrl ←移动光标到下一个单词的开头&#xff1a;Ctrl →删除光标之前的字符&#xff1a;C…

sentinel blockHandler不生效

sentinel blockHandler不生效: package org.bc.sentinel.controller;import com.alibaba.csp.sentinel.annotation.SentinelResource; import com.alibaba.csp.sentinel.slots.block.BlockException; import org.apache.commons.lang3.RandomUtils; import org.springfram…