React快速入门之组件
目录
- 组件
- JSX在标签使用`{}`嵌入JS表达式
- 使用组件
- 组件嵌套
- 以🌲树的方式管理组件间的关系
- 组件纯粹原则
组件
文件:Profile.js
export default function Profile({isPacked = true,head,stlyeTmp,src,size = 80}) {if (isPacked) {head = head + " ✔";}return (<><h1>{head}</h1><imgsrc={src}alt="Katherine Johnson"width={size}style={stlyeTmp}/></>)
}export function Gallery() {return ...
}
export:组件可导出default:默认导出组件(一个文件中只能有一个默认导出的组件,通常为文件名!)function:表明这是个组件Profile:组件名必须以大写字母开头{head,src,size = 80}:参数(size默认值80)return:返回一个JSX标签,单行时省略()
JSX在标签使用{}嵌入JS表达式
export default function Profile({isPacked,recipes}) {return (<div>{isPacked ? (<h1>{head}</h1>) : (head)}{isPacked && 'isPacked为true时才显示'}{recipes.map(recipe =><div key={recipe.id}>{recipe.name}{recipe.ings.filter((ing,i) => i > 4)}</div>)}</div>)
}
{isPacked ? (<h1>{head}</h1>) : (head)}:三元组运算{isPacked && 'isPacked为true时才显示'}:逻辑与运算数组.map(返回一个JSX标签):遍历每个元素(参数a:a为当前元素;参数(a,b):a为当前元素,b为元素下标);每个元素必须有唯一key数组.filter:返回条件为true的元素
使用组件
文件:App.js
import Profile from './Profile.js';
import { Gallery } from './Profile.js';const baseUrl = 'https://i.imgur.com/MK3eW3Am';export default function App() {return (<section><Profile head='标题' src={baseUrl + '.jpg'} size={100}stlyeTmp={{backgroundColor: 'black',color: 'pink'}}/><Gallery /></section>);
}
- 组件导入导出
| 语法 | 导出声明 | 导入声明 |
|---|---|---|
| 默认 | export default function Profile(){} | import Profile from './Profile.js'; 导入Profile.js中的默认导出组件 |
| 命名 | export function Gallery() {} | import { Gallery } from './Profile.js';导入Profile.js中的非默认的导出组件,必须使用{} |
- 使用组件并传入参数:(
{ backgroundColor: 'black', color: 'pink' }是一个对象,和100等价)
<Profile head='HHHH' src={baseUrl + '.jpg'} size={100}stlyeTmp={{backgroundColor: 'black',color: 'pink'}}/>
组件嵌套
- 目标效果
<Card><Avatar />
</Card><Card><Profile />
</Card>
- 实现方式
function Card({ children }) {return (<div className="card">{children}</div>);
}
以🌲树的方式管理组件间的关系

组件纯粹原则
-
它只管自己的事。 它不应更改渲染前存在的任何对象或变量。
-
相同的输入,相同的输出。 给定相同的输入,组件应该始终返回相同的 JSX。
-
组件的任何输入(变量、属性、状态和上下文)应该是只读的!,不应该直接修改!应使用
set状态或useEffect去更改数据!(因为直接修改的代码会因渲染次数、渲染顺序导致不可预测性!) -
React 提供了一个 “严格模式”,它在开发过程中两次调用每个组件的函数。 通过两次调用组件函数,严格模式有助于找到违反纯粹原则的组件。通过将根组件封装到 <React.StrictMode> 中实现:
root.render(<React.StrictMode><App /> //根组件</React.StrictMode>
);
相关文章:
React快速入门之组件
目录 组件JSX在标签使用{}嵌入JS表达式使用组件组件嵌套以🌲树的方式管理组件间的关系组件纯粹原则 组件 文件:Profile.js export default function Profile({isPacked true,head,stlyeTmp,src,size 80}) {if (isPacked) {head head &q…...
.NET Conf 2023 回顾 – 庆祝社区、创新和 .NET 8 的发布
作者: Jon Galloway - Principal Program Manager, .NET Community Team Mehul Harry - Product Marketing Manager, .NET, Azure Marketing 排版:Alan Wang .NET Conf 2023 是有史以来规模最大的 .NET 会议,来自全球各地的演讲者进行了 100 …...
Hadoop入门学习笔记——六、连接到Hive
视频课程地址:https://www.bilibili.com/video/BV1WY4y197g7 课程资料链接:https://pan.baidu.com/s/15KpnWeKpvExpKmOC8xjmtQ?pwd5ay8 Hadoop入门学习笔记(汇总) 目录 六、连接到Hive6.1. 使用Hive的Shell客户端6.2. 使用Beel…...
【K8S 基本概念】Kurbernetes的架构和核心概念
目录 一、Kurbernetes 1.1 简介 1.2、K8S的特性: 1.3、docker和K8S: 1.4、K8S的作用: 1.5、K8S的特性: 二、K8S集群架构与组件: 三、K8S的核心组件: 一、master组件: 1、kube-apiserve…...
WPS复选框里打对号,显示小太阳或粗黑圆圈的问题解决方法
问题描述 WPS是时下最流行的字处理软件之一,是目前唯一可以和微软office办公套件相抗衡的国产软件。然而,在使用WPS的过程中也会出现一些莫名其妙的错误,如利用WPS打开docx文件时,如果文件包含复选框,经常会出…...
对“企业数据资源相关会计处理暂行规定“的个人理解
附:2023年数据资源入表白皮书下载: 关注WX公众号: commindtech77, 获得数据资产相关白皮书下载地址 1. 回复关键字:数据资源入表白皮书 下载 《2023数据资源入表白皮书》 2. 回复关键字:光大银行 下载 光…...
JavaScript:函数隐含对象arguments/剩余参数. . .c/解构赋值
除了this,在函数内部还存在着一个隐含的参数arguments arguments 是一个类数组对象(伪数组) 调用函数时传递的所有实参,都被存储在arguments中 arguments[0] 表示的是第一个实参 arguments[1] 表示的是第二个实参 以此类推..…...
MFC窗体背景颜色的设置、控件白色背景问题、控件文本显示重叠问题、被父窗体背景覆盖的问题
文章目录 设置mfc窗体背景颜色窗体设置背景颜色后解决控件白色背景解决重复修改控件文本后重叠的问题自绘控件被父窗体背景覆盖的问题 设置mfc窗体背景颜色 设置窗体的背景颜色非常简单,只需要在窗体的OnEraseBkgnd里面填充窗体背景就可以了,甚至直接画…...
c++简易AI
今天小编一时雅兴大发,做了一个c的简易AI,还是很垃圾的! 题外话(每期都会有):我的蛋仔名叫酷影kuying,大家能加我好友吗? 上代码咯! #include<bits/stdc.h> #in…...
java获取两个List集合之间的交集、差集、并集
文章目录 方式一、jdk8 Stream求交集、并集、差集方式二、求交集方式三、collections4.CollectionUtils求交集、差集、并集 本文总结一下java中获取两个List之间的交集、补集、并集的几种方式。 最常用的通过for循环遍历两个集合的方式在这里就不整理了,主要整理一些…...
轻松实现iphone截图传电脑
目录 摘要 引言 用户登录工具和连接设备 生成截图 摘要 本篇博文介绍了克魔助手这款工具,解决了iPhone与Windows系统下图片传输的烦恼。通过连接同一Wi-Fi,使用克魔助手轻松实现了iPhone截图传输到电脑上的便捷操作。用户只需简单地下载并安装克魔助…...
【网络安全】upload靶场pass1-10思路
目录 Pass-1 Pass-2 Pass-3 Pass-4 Pass-5 Pass-6 Pass-7 Pass-8 Pass-9 Pass-10 🌈嗨!我是Filotimo__🌈。很高兴与大家相识,希望我的博客能对你有所帮助。 💡本文由Filotimo__✍️原创,首发于CSDN…...
共享单车之数据存储
文章目录 第1关:获取工作簿中的数据第2关:保存共享单车数据 第1关:获取工作簿中的数据 相关知识 获取工作簿中的信息,我们可以使用Java POI(POI是一个提供API给Java程序对Microsoft Office格式档案读和写的功能&#…...
Flink(十一)【状态管理】
Flink 状态管理 我们一直称 Flink 为运行在数据流上的有状态计算框架和处理引擎。在之前的章节中也已经多次提到了“状态”(state),不论是简单聚合、窗口聚合,还是处理函数的应用,都会有状态的身影出现。状态就如同事务…...
【三维目标检测/自动驾驶】IA-BEV:基于结构先验和自增强学习的实例感知三维目标检测(AAAI 2024)
系列文章目录 论文:Instance-aware Multi-Camera 3D Object Detection with Structural Priors Mining and Self-Boosting Learning 地址:https://arxiv.org/pdf/2312.08004.pdf 来源:复旦大学 英特尔Shanghai Key Lab /美团 文章目录 系列文…...
wefew
123212...
Springboot整合JSP-修订版本(Springboot3.1.6+IDEA2022版本)
1、问题概述? Springboot对Thymeleaf支持的要更好一些,Springboot内嵌的Tomcat默认是没有JSP引擎,不支持直接使用JSP模板引擎。这个时候我们需要自己配置使用。 2、Springboot整合使用JSP过程 现在很多的IDEA版本即使创建的项目类型是WAR工…...
Java核心知识点1-java和c++区别、隐式和显示类型转换
java和c区别 java通过虚拟机实现跨平台特性,但c依赖于特定的平台。java没有指针,它的引用可以理解为安全指针,而c和c一样具有指针。java支持自动垃圾回收,而c需要手动回收。java不支持多重继承,只能通过实现多个接口来…...
C++图论之强连通图
1. 连通性 什么是连通性? 连通,字面而言,类似于自来水管道中的水流,如果水能从某一个地点畅通流到另一个地点,说明两点之间是连通的。也说明水管具有连通性,图中即如此。 无向图和有向图的连通概念稍有差…...
SadTalker数字人增加视频输出mp4质量精度
最近在用数字人简易方案,看到了sadtalker虽然效果差,但是可以作为一个快速方案,没有安装sd的版本,随便找了个一键安装包 设置如上 使用倒是非常简单,但是出现一个问题,就是输出的mp4都出马赛克了 界面上却…...
手游刚开服就被攻击怎么办?如何防御DDoS?
开服初期是手游最脆弱的阶段,极易成为DDoS攻击的目标。一旦遭遇攻击,可能导致服务器瘫痪、玩家流失,甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案,帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...
label-studio的使用教程(导入本地路径)
文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...
基于Flask实现的医疗保险欺诈识别监测模型
基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施,由雇主和个人按一定比例缴纳保险费,建立社会医疗保险基金,支付雇员医疗费用的一种医疗保险制度, 它是促进社会文明和进步的…...
基于当前项目通过npm包形式暴露公共组件
1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹,并新增内容 3.创建package文件夹...
Cloudflare 从 Nginx 到 Pingora:性能、效率与安全的全面升级
在互联网的快速发展中,高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司,近期做出了一个重大技术决策:弃用长期使用的 Nginx,转而采用其内部开发…...
【配置 YOLOX 用于按目录分类的图片数据集】
现在的图标点选越来越多,如何一步解决,采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集(每个目录代表一个类别,目录下是该类别的所有图片),你需要进行以下配置步骤&#x…...
AI编程--插件对比分析:CodeRider、GitHub Copilot及其他
AI编程插件对比分析:CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展,AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者,分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...
如何在最短时间内提升打ctf(web)的水平?
刚刚刷完2遍 bugku 的 web 题,前来答题。 每个人对刷题理解是不同,有的人是看了writeup就等于刷了,有的人是收藏了writeup就等于刷了,有的人是跟着writeup做了一遍就等于刷了,还有的人是独立思考做了一遍就等于刷了。…...
dify打造数据可视化图表
一、概述 在日常工作和学习中,我们经常需要和数据打交道。无论是分析报告、项目展示,还是简单的数据洞察,一个清晰直观的图表,往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server,由蚂蚁集团 AntV 团队…...
USB Over IP专用硬件的5个特点
USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中,从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备(如专用硬件设备),从而消除了直接物理连接的需要。USB over IP的…...
