【React】插槽渲染机制
目录
- 通过 children 属性结合条件渲染
- 通过 children 和 slot 属性实现具名插槽
- 通过 props 实现具名插槽
在 React 中,并没有直接类似于 Vue 中的“插槽”机制(slot)。但是,React 可以通过
props和
children 来实现类似插槽的功能,允许你将组件的内容进行灵活插入和替换。
通过 children 属性结合条件渲染
通过 children 来传递任意数量的子元素,然后在组件内部通过位置进行条件渲染,从而实现插槽功能。
Layout 组件通过 children 渲染传递给它的所有子元素,而这些子元素可以是任何内容,类似于 Vue 中的默认插槽。虽然在某些情况下,children 已经是一个数组(例如多个子元素的情况),但 React.Children.toArray 会确保你始终获得一个标准化的数组(过滤掉null、undefined等数据)。
//子组件
const Layout = ({ children }) => {children = React.Children.toArray(children);console.log(children,'children')return (<div className="layout"><header>Header</header><main>{children}</main> {/* 这里的 children 就是父组件传递进来的内容 */}<footer>Footer</footer></div>);
};
//父组件
const App = () => {return (<Layout><h1>Hello, React!</h1><p>This is the main content of the page.</p></Layout>);
};
打印出children,就是父组件标签里内容编译成的virtualDOM。

通过 children 和 slot 属性实现具名插槽
在标签上加slot来标记标签
//父组件
root.render(<><DemoOne title="REACT好好玩哦" x={10}><span slot="footer">我是页脚</span><span>哈哈哈哈</span><span slot="header">我是页眉</span></DemoOne></>
);
子组件根据children属性中的slot来区分插槽
//子组件
const DemoOne = function DemoOne(props) {let { title, x, children } = props;children = React.Children.toArray(children);let headerSlot = [],footerSlot = [],defaultSlot = [];children.forEach(child => {// 传递进来的插槽信息,都是编译为virtualDOM后传递进来的「而不是传递的标签」let { slot } = child.props;if (slot === 'header') {headerSlot.push(child);} else if (slot === 'footer') {footerSlot.push(child);} else {defaultSlot.push(child);}});return <div className="demo-box">{headerSlot}<br /><h2 className="title">{title}</h2><span>{x}</span><br />{footerSlot}</div>;
};
通过 props 实现具名插槽
显式传递 props 来模拟具名插槽,传递不同的内容到特定的插槽位置
const DemoOne = ({ title, x, children, footer, header }) => {return (<div className="demo-box"><h1>{title}</h1><div>{header}</div> {/* 渲染具名插槽 header */}<div>{children}</div> {/* 渲染默认插槽 */}<div>{footer}</div> {/* 渲染具名插槽 footer */}</div>);
};const App = () => {return (<DemoOne title="REACT好好玩哦" x={10} footer={<span>我是页脚</span>} header={<span>我是页眉</span>}><span>哈哈哈哈</span></DemoOne>);
};

相关文章:
【React】插槽渲染机制
目录 通过 children 属性结合条件渲染通过 children 和 slot 属性实现具名插槽通过 props 实现具名插槽 在 React 中,并没有直接类似于 Vue 中的“插槽”机制(slot)。但是,React 可以通过 props和 children 来实现类似插槽的功能…...
计算机网络 | 什么是公网、私网、NAT?
关注:CodingTechWork 引言 计算机网络是现代信息社会的基石,而网络通信的顺畅性和安全性依赖于有效的IP地址管理和网络转换机制。在网络中,IP地址起到了标识设备和进行数据传输的核心作用。本文将详细讨论公网IP、私网IP以及NAT转换等网络技…...
如何解决Outlook无法连接到服务器的问题
Microsoft Outlook 是一款广泛使用的电子邮件客户端,它能够帮助用户高效地管理邮箱、日历和任务。然而,尽管其功能强大,用户有时会遇到“Outlook无法连接到服务器”的问题。这种问题通常会让用户无法接收或发送电子邮件,甚至可能导…...
vue2 web 多标签输入框 elinput是否当前焦点
又来分享一点点工作积累及解决方案 产品中需要用户输入一些文字后按下回车键生成标签来显示在页面上,经过尝试与改造完成如下: <template><div class"tags-view" click"beginInput"><el-tag :key"index" …...
32单片机综合应用案例——物联网(IoT)环境监测站(四)(内附详细代码讲解!!!)
无论你身处何种困境,都要坚持下去,因为勇气和毅力是成功的基石。不要害怕失败,因为失败并不代表终结,而是为了成长和进步。相信自己的能力,相信自己的潜力,相信自己可以克服一切困难。成功需要付出努力和坚…...
LabVIEW与WPS文件格式的兼容性
LabVIEW 本身并不原生支持将文件直接保存为 WPS 格式(如 WPS 文档或表格)。然而,可以通过几种间接的方式实现这一目标,确保您能将 LabVIEW 中的数据或报告转换为 WPS 可兼容的格式。以下是几种常见的解决方案: 导出…...
小结: 路由协议的演进和分类
路由协议的演进和分类,包括其发展历史及主要应用场景。路由协议用于在网络中确定数据传输的最佳路径,主要分为内部网关协议(IGP)和外部网关协议(EGP) AS-AS 之间的。 路由协议的演进 1982年:出…...
OpenCV相机标定与3D重建(60)用于立体校正的函数stereoRectify()的使用
操作系统:ubuntu22.04 OpenCV版本:OpenCV4.9 IDE:Visual Studio Code 编程语言:C11 算法描述 为已校准的立体相机的每个头计算校正变换。 cv::stereoRectify 是 OpenCV 中用于立体校正的函数,它基于已知的相机参数和相对位置&am…...
Android wifi列表中去自身的热点
Android wifi列表中去自身的热点 一、前言 Android wifi列表中能搜索到自身的热点wifi? 正常手机上都不会出现这个问题;可能是系统底层已经做了过滤处理。 现实开发中Android设备的Wifi能搜索到自身热点也可能会存在。 比如基于两个单独的wifi双模组硬…...
Windows环境本地配置pyspark环境详细教程
目录 一、背景简记二、本地单机spark环境配置详细步骤第一步:python环境安装第二步:安装jdk及配置环境变量安装包下载安装环境变量配置 第三步:安装Spark安装包下载安装配置环境变量 第四步:安装hadoop安装包下载安装配置环境变量…...
《自动驾驶与机器人中的SLAM技术》ch9:自动驾驶车辆的离线地图构建
目录 1 点云建图的流程 2 前端实现 2.1 前端流程 2.2 前端结果 3 后端位姿图优化与异常值剔除 3.1 两阶段优化流程 3.2 优化结果 ① 第一阶段优化结果 ② 第二阶段优化结果 4 回环检测 4.1 回环检测流程 ① 遍历第一阶段优化轨迹中的关键帧。 ② 并发计算候选回环对…...
IP属地会随着人的移动而改变吗
在当今数字化时代,互联网已成为人们生活中不可或缺的一部分。无论是社交媒体的日常互动,还是在线购物、远程工作,IP地址作为网络身份的重要标识,扮演着举足轻重的角色。随着移动互联网技术的飞速发展,人们越来越多地在…...
openharmony应用开发快速入门
开发准备 本文档适用于OpenHarmony应用开发的初学者。通过构建一个简单的具有页面跳转/返回功能的应用(如下图所示),快速了解工程目录的主要文件,熟悉OpenHarmony应用开发流程。 在开始之前,您需要了解有关OpenHarmon…...
USB3020任意波形发生器4路16位同步模拟量输出卡1MS/s频率 阿尔泰科技
信息社会的发展,在很大程度上取决于信息与信号处理技术的先进性。数字信号处理技术的出现改变了信息 与信号处理技术的整个面貌,而数据采集作为数字信号处理的必不可少的前期工作在整个数字系统中起到关键 性、乃至决定性的作用,其应用已经深…...
云消息队列 Kafka 版 V3 系列荣获信通院“云原生技术创新标杆案例”
2024 年 12 月 24 日,由中国信息通信研究院(以下简称“中国信通院”)主办的“2025 中国信通院深度观察报告会:算力互联网分论坛”,在北京隆重召开。本次论坛以“算力互联网 新质生产力”为主题,全面展示中国…...
linux下的NFS和FTP部署
目录 NFS应用场景架构通信原理部署权限认证Kerberos5其他认证方式 命令serverclient查看测试系统重启后自动挂载 NFS 共享 高可用实现 FTP对比一些ftp服务器1. **vsftpd (Very Secure FTP Daemon)**2. **ProFTPD (Professional FTP Daemon)**3. **Pure-FTPd**4. **WU-FTPD (Was…...
JS Clipboard API
1.作用 在web应用程序中,当用户授予了相应的权限,Clipboard API 就能实现系统剪切板的复制、粘贴和剪切功能。系统剪切板暴露在Navigator.clipboard 中。 2.例子 window.onload () > {// 监听用户的复制事件document.addEventListener(copy, (e) …...
MySQL中大量数据优化方案
文章目录 1 大量数据优化1.1 引言1.2 评估表数据体量1.2.1 表容量1.2.2 磁盘空间1.2.3 实例容量 1.3 出现问题的原因1.4 解决问题1.4.1 数据表分区1.4.1.1 简介1.4.1.2 分区限制和执行计划1.4.1.3 分区表的索引1.4.1.4 为什么分区键必须是主键的一部分1.4.1.5 操作分区1.4.1.5.…...
重拾Python学习,先从把python删除开始。。。
自己折腾就是不行啊,屡战屡败,最近终于找到前辈教我 第一步 删除Python 先把前阵子折腾的WSL和VScode删掉。还是得用spyder,跟matlab最像,也最容易入手。 从VScode上搞python,最后安装到appdata上,安装插…...
centos 安全配置基线
centos 安全配置基线 一、系统防火墙及SE系统1. 系统自带防火墙iptables(Centos6)基础命令查看防火墙设置使用命令查看防火墙设置使用命令清除防火墙设置防火墙策略开放指定的端口屏蔽IP 2. 系统自带防火墙firewalled(Centos7)基础…...
网络编程(Modbus进阶)
思维导图 Modbus RTU(先学一点理论) 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议,由 Modicon 公司(现施耐德电气)于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...
龙虎榜——20250610
上证指数放量收阴线,个股多数下跌,盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型,指数短线有调整的需求,大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的:御银股份、雄帝科技 驱动…...
Golang dig框架与GraphQL的完美结合
将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用,可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器,能够帮助开发者更好地管理复杂的依赖关系,而 GraphQL 则是一种用于 API 的查询语言,能够提…...
[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?
论文网址:pdf 英文是纯手打的!论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误,若有发现欢迎评论指正!文章偏向于笔记,谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...
相机Camera日志分析之三十一:高通Camx HAL十种流程基础分析关键字汇总(后续持续更新中)
【关注我,后续持续新增专题博文,谢谢!!!】 上一篇我们讲了:有对最普通的场景进行各个日志注释讲解,但相机场景太多,日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志,通过下列分类关键字搜索,即可清晰的分析不同场景的相机运行流程差异…...
RNN避坑指南:从数学推导到LSTM/GRU工业级部署实战流程
本文较长,建议点赞收藏,以免遗失。更多AI大模型应用开发学习视频及资料,尽在聚客AI学院。 本文全面剖析RNN核心原理,深入讲解梯度消失/爆炸问题,并通过LSTM/GRU结构实现解决方案,提供时间序列预测和文本生成…...
Python ROS2【机器人中间件框架】 简介
销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...
Go 语言并发编程基础:无缓冲与有缓冲通道
在上一章节中,我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道,它们在并发编程中各具特点和应用场景。 一、通道的基本分类 类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好࿰…...
uniapp 开发ios, xcode 提交app store connect 和 testflight内测
uniapp 中配置 配置manifest 文档:manifest.json 应用配置 | uni-app官网 hbuilderx中本地打包 下载IOS最新SDK 开发环境 | uni小程序SDK hbulderx 版本号:4.66 对应的sdk版本 4.66 两者必须一致 本地打包的资源导入到SDK 导入资源 | uni小程序SDK …...
yaml读取写入常见错误 (‘cannot represent an object‘, 117)
错误一:yaml.representer.RepresenterError: (‘cannot represent an object’, 117) 出现这个问题一直没找到原因,后面把yaml.safe_dump直接替换成yaml.dump,确实能保存,但出现乱码: 放弃yaml.dump,又切…...
