当前位置: 首页 > news >正文

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表达式使用组件组件嵌套以&#x1f332;树的方式管理组件间的关系组件纯粹原则 组件 文件&#xff1a;Profile.js export default function Profile({isPacked true&#xff0c;head,stlyeTmp,src,size 80}) {if (isPacked) {head head &q…...

.NET Conf 2023 回顾 – 庆祝社区、创新和 .NET 8 的发布

作者&#xff1a; Jon Galloway - Principal Program Manager, .NET Community Team Mehul Harry - Product Marketing Manager, .NET, Azure Marketing 排版&#xff1a;Alan Wang .NET Conf 2023 是有史以来规模最大的 .NET 会议&#xff0c;来自全球各地的演讲者进行了 100 …...

Hadoop入门学习笔记——六、连接到Hive

视频课程地址&#xff1a;https://www.bilibili.com/video/BV1WY4y197g7 课程资料链接&#xff1a;https://pan.baidu.com/s/15KpnWeKpvExpKmOC8xjmtQ?pwd5ay8 Hadoop入门学习笔记&#xff08;汇总&#xff09; 目录 六、连接到Hive6.1. 使用Hive的Shell客户端6.2. 使用Beel…...

【K8S 基本概念】Kurbernetes的架构和核心概念

目录 一、Kurbernetes 1.1 简介 1.2、K8S的特性&#xff1a; 1.3、docker和K8S&#xff1a; 1.4、K8S的作用&#xff1a; 1.5、K8S的特性&#xff1a; 二、K8S集群架构与组件&#xff1a; 三、K8S的核心组件&#xff1a; 一、master组件&#xff1a; 1、kube-apiserve…...

WPS复选框里打对号,显示小太阳或粗黑圆圈的问题解决方法

问题描述 WPS是时下最流行的字处理软件之一&#xff0c;是目前唯一可以和微软office办公套件相抗衡的国产软件。然而&#xff0c;在使用WPS的过程中也会出现一些莫名其妙的错误&#xff0c;如利用WPS打开docx文件时&#xff0c;如果文件包含复选框&#xff0c;经常会出…...

对“企业数据资源相关会计处理暂行规定“的个人理解

附&#xff1a;2023年数据资源入表白皮书下载&#xff1a; 关注WX公众号&#xff1a; commindtech77&#xff0c; 获得数据资产相关白皮书下载地址 1. 回复关键字&#xff1a;数据资源入表白皮书 下载 《2023数据资源入表白皮书》 2. 回复关键字&#xff1a;光大银行 下载 光…...

JavaScript:函数隐含对象arguments/剩余参数. . .c/解构赋值

除了this&#xff0c;在函数内部还存在着一个隐含的参数arguments arguments 是一个类数组对象&#xff08;伪数组&#xff09; 调用函数时传递的所有实参&#xff0c;都被存储在arguments中 arguments[0] 表示的是第一个实参 arguments[1] 表示的是第二个实参 以此类推..…...

MFC窗体背景颜色的设置、控件白色背景问题、控件文本显示重叠问题、被父窗体背景覆盖的问题

文章目录 设置mfc窗体背景颜色窗体设置背景颜色后解决控件白色背景解决重复修改控件文本后重叠的问题自绘控件被父窗体背景覆盖的问题 设置mfc窗体背景颜色 设置窗体的背景颜色非常简单&#xff0c;只需要在窗体的OnEraseBkgnd里面填充窗体背景就可以了&#xff0c;甚至直接画…...

c++简易AI

今天小编一时雅兴大发&#xff0c;做了一个c的简易AI&#xff0c;还是很垃圾的&#xff01; 题外话&#xff08;每期都会有&#xff09;&#xff1a;我的蛋仔名叫酷影kuying&#xff0c;大家能加我好友吗&#xff1f; 上代码咯&#xff01; #include<bits/stdc.h> #in…...

java获取两个List集合之间的交集、差集、并集

文章目录 方式一、jdk8 Stream求交集、并集、差集方式二、求交集方式三、collections4.CollectionUtils求交集、差集、并集 本文总结一下java中获取两个List之间的交集、补集、并集的几种方式。 最常用的通过for循环遍历两个集合的方式在这里就不整理了&#xff0c;主要整理一些…...

轻松实现iphone截图传电脑

目录 摘要 引言 用户登录工具和连接设备 生成截图 摘要 本篇博文介绍了克魔助手这款工具&#xff0c;解决了iPhone与Windows系统下图片传输的烦恼。通过连接同一Wi-Fi&#xff0c;使用克魔助手轻松实现了iPhone截图传输到电脑上的便捷操作。用户只需简单地下载并安装克魔助…...

【网络安全】upload靶场pass1-10思路

目录 Pass-1 Pass-2 Pass-3 Pass-4 Pass-5 Pass-6 Pass-7 Pass-8 Pass-9 Pass-10 &#x1f308;嗨&#xff01;我是Filotimo__&#x1f308;。很高兴与大家相识&#xff0c;希望我的博客能对你有所帮助。 &#x1f4a1;本文由Filotimo__✍️原创&#xff0c;首发于CSDN&#x1…...

共享单车之数据存储

文章目录 第1关&#xff1a;获取工作簿中的数据第2关&#xff1a;保存共享单车数据 第1关&#xff1a;获取工作簿中的数据 相关知识 获取工作簿中的信息&#xff0c;我们可以使用Java POI&#xff08;POI是一个提供API给Java程序对Microsoft Office格式档案读和写的功能&#…...

Flink(十一)【状态管理】

Flink 状态管理 我们一直称 Flink 为运行在数据流上的有状态计算框架和处理引擎。在之前的章节中也已经多次提到了“状态”&#xff08;state&#xff09;&#xff0c;不论是简单聚合、窗口聚合&#xff0c;还是处理函数的应用&#xff0c;都会有状态的身影出现。状态就如同事务…...

【三维目标检测/自动驾驶】IA-BEV:基于结构先验和自增强学习的实例感知三维目标检测(AAAI 2024)

系列文章目录 论文&#xff1a;Instance-aware Multi-Camera 3D Object Detection with Structural Priors Mining and Self-Boosting Learning 地址&#xff1a;https://arxiv.org/pdf/2312.08004.pdf 来源&#xff1a;复旦大学 英特尔Shanghai Key Lab /美团 文章目录 系列文…...

wefew

123212...

Springboot整合JSP-修订版本(Springboot3.1.6+IDEA2022版本)

1、问题概述&#xff1f; Springboot对Thymeleaf支持的要更好一些&#xff0c;Springboot内嵌的Tomcat默认是没有JSP引擎&#xff0c;不支持直接使用JSP模板引擎。这个时候我们需要自己配置使用。 2、Springboot整合使用JSP过程 现在很多的IDEA版本即使创建的项目类型是WAR工…...

Java核心知识点1-java和c++区别、隐式和显示类型转换

java和c区别 java通过虚拟机实现跨平台特性&#xff0c;但c依赖于特定的平台。java没有指针&#xff0c;它的引用可以理解为安全指针&#xff0c;而c和c一样具有指针。java支持自动垃圾回收&#xff0c;而c需要手动回收。java不支持多重继承&#xff0c;只能通过实现多个接口来…...

C++图论之强连通图

1. 连通性 什么是连通性&#xff1f; 连通&#xff0c;字面而言&#xff0c;类似于自来水管道中的水流&#xff0c;如果水能从某一个地点畅通流到另一个地点&#xff0c;说明两点之间是连通的。也说明水管具有连通性&#xff0c;图中即如此。 无向图和有向图的连通概念稍有差…...

SadTalker数字人增加视频输出mp4质量精度

最近在用数字人简易方案&#xff0c;看到了sadtalker虽然效果差&#xff0c;但是可以作为一个快速方案&#xff0c;没有安装sd的版本&#xff0c;随便找了个一键安装包 设置如上 使用倒是非常简单&#xff0c;但是出现一个问题&#xff0c;就是输出的mp4都出马赛克了 界面上却…...

Linux链表操作全解析

Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表&#xff1f;1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...

2025年能源电力系统与流体力学国际会议 (EPSFD 2025)

2025年能源电力系统与流体力学国际会议&#xff08;EPSFD 2025&#xff09;将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会&#xff0c;EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...

Cesium1.95中高性能加载1500个点

一、基本方式&#xff1a; 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...

大型活动交通拥堵治理的视觉算法应用

大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动&#xff08;如演唱会、马拉松赛事、高考中考等&#xff09;期间&#xff0c;城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例&#xff0c;暖城商圈曾因观众集中离场导致周边…...

如何在看板中体现优先级变化

在看板中有效体现优先级变化的关键措施包括&#xff1a;采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中&#xff0c;设置任务排序规则尤其重要&#xff0c;因为它让看板视觉上直观地体…...

1.3 VSCode安装与环境配置

进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件&#xff0c;然后打开终端&#xff0c;进入下载文件夹&#xff0c;键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...

LLMs 系列实操科普(1)

写在前面&#xff1a; 本期内容我们继续 Andrej Karpathy 的《How I use LLMs》讲座内容&#xff0c;原视频时长 ~130 分钟&#xff0c;以实操演示主流的一些 LLMs 的使用&#xff0c;由于涉及到实操&#xff0c;实际上并不适合以文字整理&#xff0c;但还是决定尽量整理一份笔…...

DAY 45 超大力王爱学Python

来自超大力王的友情提示&#xff1a;在用tensordoard的时候一定一定要用绝对位置&#xff0c;例如&#xff1a;tensorboard --logdir"D:\代码\archive (1)\runs\cifar10_mlp_experiment_2" 不然读取不了数据 知识点回顾&#xff1a; tensorboard的发展历史和原理tens…...

Java多线程实现之Runnable接口深度解析

Java多线程实现之Runnable接口深度解析 一、Runnable接口概述1.1 接口定义1.2 与Thread类的关系1.3 使用Runnable接口的优势 二、Runnable接口的基本实现方式2.1 传统方式实现Runnable接口2.2 使用匿名内部类实现Runnable接口2.3 使用Lambda表达式实现Runnable接口 三、Runnabl…...

工厂方法模式和抽象工厂方法模式的battle

1.案例直接上手 在这个案例里面&#xff0c;我们会实现这个普通的工厂方法&#xff0c;并且对比这个普通工厂方法和我们直接创建对象的差别在哪里&#xff0c;为什么需要一个工厂&#xff1a; 下面的这个是我们的这个案例里面涉及到的接口和对应的实现类&#xff1a; 两个发…...