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

【React】插槽渲染机制

news 来源：原创 2025/6/17 6:39:51

通过 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 来实现类似插槽的功能…...

编程日记 2025/6/1 8:28:38

【数据分享】1929-2024年全球站点的逐月平均气温数据（Shp\Excel\免费获取）

气象数据是在各项研究中都经常使用的数据，气象指标包括气温、风速、降水、湿度等指标，其中又以气温指标最为常用！说到气温数据，最详细的气温数据是具体到气象监测站点的气温数据！本次我们为大家带来的就是具体到气象监…...

编程日记 2025/6/2 3:03:15

立创开发板入门第六课音频-扬声器和麦克风 I2S驱动

音频芯片介绍开发板上带有一个麦克风，一个扬声器，音频编解码芯片使用ES8311。麦克风直接连接到了ES8311芯片上，ES8311和扬声器之间，还有一个音频驱动放大器。ES8311通过I2S接口与ESP32-C3连接。 ES8311这个芯片不仅使用I2S接口…...

编程日记 2025/5/31 6:49:17

使用 Java 实现基于 DFA 算法的敏感词检测

使用 Java 实现基于 DFA 算法的敏感词检测 1. 引言敏感词检测在内容审核、信息过滤等领域有着广泛的应用。本文将介绍如何使用 DFA（Deterministic Finite Automaton，确定有限状态自动机） 算法，在 Java 中实现高效的敏感词检测。…...

编程日记 2025/6/1 10:40:59

springboot集成websocket实现实时大量数据，效率性能高

前言小编我将用CSDN记录软件开发求学之路上亲身所得与所学的心得与知识，有兴趣的小伙伴可以关注一下！ 也许一个人独行，可以走的很快，但是一群人结伴而行，才能走的更远！让我们在成长的道路上互相学习&…...

编程日记 2025/5/31 12:59:32

如何在 Google Cloud Shell 中使用 Visual Studio Code (VS Code)？

Google Cloud Shell 是一个基于浏览器的命令行界面，它提供了一个临时的虚拟机环境，允许开发者在没有本地环境配置的情况下使用 Google Cloud 的各种服务。它还提供了一个免费的 5GB 存储空间以及可以在其中执行所有 Google Cloud 操作的命令行界面。 Vis…...

编程日记 2025/6/3 19:22:16

ChatGPT大模型极简应用开发-目录

引言要理解 ChatGPT，了解其背后的 Transformer 架构和 GPT 技术一路的演进则变得非常必要。 ChatGPT 背后的 LLM 技术使普通人能够通过自然语言完成过去只能由程序员通过编程语言实现的任务，这是一场巨大的变革。然而，人类通常容易高估技术…...

编程日记 2025/6/2 6:57:15

ZooKeeper 核心知识全解析：架构、角色、节点与应用

1.ZooKeeper 分布式锁怎么实现的 ZooKeeper 是一个高效的分布式协调服务，它提供了简单的原语集来构建更复杂的同步原语和协调数据结构。利用 ZooKeeper 实现分布式锁主要依赖于它的顺序节点（Sequential Node）特性以及临时节点（Ep…...

编程日记 2025/6/3 13:17:16

令牌桶逻辑计算逻辑： 代码： import redis.clients.jedis.Jedis; import redis.clients.jedis.JedisPool;/*** ClassName RedisRateLimiterTokenBucket* Description TODO* Author zhang zhengdong* DATE 2025/1/17 20:22* Version 1.0*/ public class…...

编程日记 2025/5/29 15:04:26

云服务器扫描出漏洞怎么办？

随着云计算技术的发展，越来越多的企业和个人选择使用云服务器来托管其应用和服务。然而，安全问题也随之而来。当云服务器的安全扫描显示存在漏洞时，如何正确应对成为了关键。本文将详细介绍发现漏洞后的处理步骤，并提供一些实用的…...

编程日记 2025/6/1 20:10:12

【影刀RPA_启动任务api】

影刀RPA_启动任务api #启动任务api import requests import json from time import sleepyingdao_Info{"accessKeyId":"XXX","accessKeySecret":"XXX","scheduleUuid":XXX,"robotUuid1":"XXX","r…...

编程日记 2025/6/3 0:10:34

Swift语言的多线程编程

Swift语言的多线程编程在现代软件开发中，多线程编程是提高应用性能和响应速度的重要手段。尤其是在 iOS 和 macOS 开发中，由于用户界面(UI)的交互性和复杂性，合理利用多线程可以极大地提升用户体验。本文将深入探讨 Swift 语言中的多线程编…...

编程日记 2025/6/1 18:52:28

js-判断一个object（对象）是否为空

1.Object.keys() 方法 const obj {};if (Object.keys(obj).length 0) {console.log(Object is empty); } else {console.log(Object is not empty); }Object.keys() 方法返回一个包含对象自身可枚举属性名称的数组。如果这个数组为空，那么对象就是空的。 2.JSO…...

编程日记 2025/6/4 17:48:15

AI在SEO中的关键词优化策略探讨

内容概要在当今数字化时代，人工智能（AI）正逐渐重塑搜索引擎优化（SEO）行业。AI技术的快速发展使得SEO策略发生了翻天覆地的变化，特别是在关键词优化方面。关键词优化的基本概念是通过选择与用户搜索意图密…...

编程日记 2025/6/2 6:08:23

无缝过渡：将 Ansys 子结构模型转换为 Nastran

了解如何将 Ansys 子结构模型无缝转换为 Nastran，以满足有效载荷动态模型要求 Ansys 子结构模型的优势 Ansys 子结构模型为从事大型装配体结构分析和仿真的工程师和分析师提供了多项优势。这些模型通过将复杂结构划分为更小、更易于管理的子结构，可以…...

编程日记 2025/6/4 12:06:54

单片机存储器和C程序编译过程

1、单片机存储器只读存储器不是并列关系，是从ROM发展到FLASH的过程 RAM ROM 随机存储器只读存储器 CPU直接存储和访问只读可访问不可写临时存数据，存的是CPU正在使用的数据永久存数据，存的是操作系统启动程序或指令断电易失 …...

编程日记 2025/5/30 13:49:33

Unity3D实现WEBGL打开Window文件对话框打开/上传文件

系列文章目录 unity工具文章目录系列文章目录👉前言👉一、效果展示👉一、unity设置👉1-1、创建Plugins文件夹👉1-2、搭建UI👉二、使用步骤👉2-1、打包webgl👉三、第二种插件实现打开文件对话框👉壁纸分享👉总结👉前言 Unity3D发布的WEBGL程序是不支持…...

编程日记 2025/6/3 12:09:50

探索 Transformer²：大语言模型自适应的新突破

目录一、来源： 论文链接：https://arxiv.org/pdf/2501.06252 代码链接：SakanaAI/self-adaptive-llms 论文发布时间：2025年1月14日二、论文概述： 图1 Transformer 概述图2 训练及推理方法概述图3 基于提示的…...

编程日记 2025/6/1 15:59:25

SDL2：arm64下编译使用 -- SDL2多媒体库使用音频实例

SDL2：Android-arm64端编译使用 2. SDL2：Android-arm64端编译使用2.1 安装和配置NDK2.2 下载编译SDL22.3 SDL2使用示例：Audio2.4 Android设备运行 2. SDL2：Android-arm64端编译使用在Linux系统上使用Android NDK编译和使用arm64下…...

编程日记 2025/6/4 0:08:50

Ubuntu、Windows系统网络设置(ping通内外网)

一、虚拟机VMware和Ubuntu系统的网络配置说明 1、虚拟机的网络适配器的模式有三种： 桥接模式NAT模式主机模式 2、虚拟机VMware的网卡配置(如何进行配置界面(虚拟机->设置)) 注意： 1、以上桥接模式(ubuntu有独立IP)、NAT模式(没有独立IP)都可以联…...

编程日记 2025/6/2 10:03:59

安全类脚本：拒绝ssh暴力破解

要求如下： 一个小时内，连续密码错误4次。 Linux lastb 命令用于列出登入系统失败的用户相关信息。实验过程如下： 1. 创建两个IP地址不同的干净环境，分别是：192.168.46.101 Rocky 2 和 192.168.46.120 openEuler 2. 2.…...

编程日记 2025/6/3 4:03:13

uc/os-II 原理及应用(八) 系统裁减以及移植到51单片机-下

现在说明几个重要的点， OSStartHighRdy 的作用就是把任务栈复制到系统栈上面，再利用RET的时候会从系统栈上到一个地址放到PC寄存器上来实现任务运行。OSCtxSw是任务切换，把系统栈全部备份到当前任务栈映射上，然后改OSTCBCur,调用…...

编程日记 2025/6/4 3:56:14

关于jwt和security

JSON Web Token（缩写 JWT） 目前最流行、最常见的跨域认证解决方案，前端后端都需要会使用的东西-腾讯云开发者社区-腾讯云 SpringBoot整合Security安全框架、控制权限让我们一起来看看Security吧！我想每个写项目的人，都…...

编程日记 2025/6/2 11:15:09

OpenAI Whisper：语音识别技术的革新者—深入架构与参数

当下语音识别技术正以前所未有的速度发展，极大地推动了人机交互的便利性和效率。OpenAI的Whisper系统无疑是这一领域的佼佼者，它凭借其卓越的性能、广泛的适用性和创新的技术架构，正在重新定义语音转文本技术的规则。今天我们一起了解一下Whi…...

编程日记 2025/6/3 13:29:21

Python 3.9及以上版本支持的新的字符串函数 str.removeprefix()

在 Python 3.9 中，新增了 str.removeprefix() 方法，用于从字符串的开头移除指定的前缀（如果存在）。如果字符串不以指定前缀开头，原字符串保持不变。用法： str.removeprefix(prefix)prefix: 要移除的前缀…...

编程日记 2025/5/31 20:41:45

Python爬虫入门

豆瓣榜单250爬取： 直接上代码： import requests import redef top250_crawer(url, sum):headers {User-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36}try:response re…...

编程日记 2025/6/3 15:46:01

hive连接mysql报错：Unknown version specified for initialization: 3.1.0

分享下一些报错的可能原因吧 1.要开启hadoop 命令：start-all.sh 2.检查 hive-site.xml 和 hive-env.sh。 hive-site.xml中应设置自己mysql的用户名和密码我的hive-site.xml如下： <configuration><property><name>javax.jdo.opt…...

编程日记 2025/6/2 5:33:11

wandb使用遇到的一些问题

整合了一下使用wandb遇到的问题 1.请问下如果电脑挂了代理，应该怎么办呢？提示：Network error (ProxyError), entering retry loop. 在本地（而非服务器）运行代码时，常常因为开启代理而无法使用wandb&#…...

编程日记 2025/5/29 22:03:22

18. C语言结构体内存布局分析与优化

本章目录: 结构体的内存布局1. 对齐规则2. 填充与对齐示例分析代码示例输出结果分析1. debug_size1_t 结构体2. debug_size2_t 结构体如何优化结构体内存布局1. 成员排序优化2. 使用 #pragma pack 指令注意事项总结在C语言中，结构体（struct&#xff…...

编程日记 2025/6/3 16:57:11

MyBatisPlus学习笔记

To be continue… 文章目录介绍快速入门入门案例常用注解常用配置核心功能条件构造器自定义SQLService接口介绍 MyBatisPlus只做增强不做改变，引入它不会对现有工程产生影响。只需简单配置，即可快速进行单表CRUD操作，从而节省大量时间。…...

编程日记 2025/6/4 1:20:46

Jetpack工具箱：不只是插件，它是开发灵魂

引言想象一下，一个 Android 开发者面对堆积如山的需求文档、无穷无尽的 BUG 修复时，突然发现了一款神器——Jetpack！这是一套专为 Android 开发者设计的库和工具集，它就像你的“编程助手”，从架构优化到 UI 管理&…...

编程日记 2025/6/3 10:15:14

2024年博客之星年度评选—创作影响力评审入围名单公布

2024年博客之星活动地址https://www.csdn.net/blogstar2024 TOP 300 榜单排名用户昵称博客主页身份认证评分原创博文评分平均质量分评分互动数据评分总分排名三掌柜666三掌柜666-CSDN博客1001002001005001wkd_007wkd_007-CSDN博客1001002001005002栗筝ihttps:/…...

编程日记 2025/6/1 21:08:30

LoadBalancer负载均衡服务调用

LoadBalancer LoadBalancer（负载均衡器）是Spring Cloud中的一个关键组件，用于在微服务架构中实现服务请求的负载均衡。它的主要作用是将客户端的请求分发到多个服务实例上，以提高系统的可用性、性能和容错能力。通过LoadBalancer&…...

编程日记 2025/6/3 3:15:39

《CPython Internals》阅读笔记：p221-p231

《CPython Internals》学习第 12天，p221-p231 总结，总计 11 页。一、技术总结无。二、英语总结(生词：2) 1.at a time idiom. separately(单独地) in the specified groups(一次)。示例： (1) I can only do one thing at …...

编程日记 2025/5/30 18:03:55

【机器学习实战入门】基于深度学习的乳腺癌分类

什么是深度学习？ 作为对机器学习的一种深入方法，深度学习受到了人类大脑和其生物神经网络的启发。它包括深层神经网络、递归神经网络、卷积神经网络和深度信念网络等架构，这些架构由多层组成，数据必须通过这些层才能最终产生输出。…...

编程日记 2025/6/3 9:57:45

Golang Gin系列-1：Gin 框架总体概述

本文介绍了Gin框架，探索了它的关键特性，并建立了简单入门的应用程序。在这系列教程里，我们会探索Gin的主要特性，如路由、中间件、数据库集成等，最终能使用Gin框架构建健壮的web应用程序。总体概述 Gin是Go编程语言的…...

编程日记 2025/6/3 20:23:29

【Python】第二弹---深入理解编程基础：从常量、变量到注释的全面解析

✨个人主页： 熬夜学编程的小林 💗系列专栏： 【C语言详解】【数据结构详解】【C详解】【Linux系统编程】【MySQL】【Python】目录 1、常量和表达式 2、变量和类型 2.1、变量是什么 2.2、变量的语法 2.3、变量的类型 2.4、动态类型特…...

编程日记 2025/5/30 16:58:59

RPA编程实践：Electron简介

文章目录前言使用Electron构建桌面应用程序什么是Electron？为什么选择Electron？如何使用Electron实现上述想法？1. 创建基本的Electron应用2. 配置BrowserWindow3. 定制化你的应用4. 打包与分发前言 Electron，用官网的话说&…...

编程日记 2025/6/4 6:51:56

svn tag

一般发布版本前，需要在svn上打个tag。步骤如下： 1、空白处右击，选择TortoiseSVN->Branch/tag; 2、填写To path，即tag的路基以及tag命名（一般用版本号来命名）；填写tag信息；勾选cr…...

编程日记 2025/5/31 11:47:58

SpringBoot错误码国际化

先看测试效果： 1. 设置中文 2.设置英文文件结构 1.中文和英文的错误消息配置 package com.ldj.mybatisflex.common;import lombok.Getter;/*** User: ldj* Date: 2025/1/12* Time: 17:50* Description: 异常消息枚举*/ Getter public enum ExceptionEnum {//…...

编程日记 2025/6/1 15:28:40

AAPM：基于大型语言模型代理的资产定价模型，夏普比率提高9.6%

“AAPM: Large Language Model Agent-based Asset Pricing Models” 论文地址：https://arxiv.org/pdf/2409.17266v1 Github地址：https://github.com/chengjunyan1/AAPM 摘要这篇文章介绍了一种利用LLM代理的资产定价模型（AAPM）…...

编程日记 2025/6/1 13:55:13

LabVIEW桥接传感器配置与数据采集

该LabVIEW程序主要用于配置桥接传感器并进行数据采集，涉及电压激励、桥接电阻、采样设置及错误处理。第一个VI（"Auto Cleanup"）用于自动清理资源，建议保留以确保系统稳定运行。以下是对图像中各个组件的详细解释&#…...

编程日记 2025/6/4 1:50:31

《汽车维修技师》是什么级别的期刊？是正规期刊吗？能评职称吗？

问题解答： 问：《汽车维修技师》是不是核心期刊？ 答：不是，是知网收录的正规学术期刊。问：《汽车维修技师》级别？ 答：省级。主管单位：北方联合出版传媒（…...

编程日记 2025/6/1 8:49:48

python(25) : 含有大模型生成的公式的文本渲染成图片并生成word文档(支持flask接口调用)

公式样例渲染前 \[ \sqrt{1904.615384} \approx 43.64 \] 渲染后安装依赖 pip install matplotlib -i https://mirrors.aliyun.com/pypi/simple/ requestspip install sympy -i https://mirrors.aliyun.com/pypi/simple/ requestspip install python-docx -i https…...

编程日记 2025/6/3 2:37:59

深度学习项目--基于LSTM的火灾预测研究(pytorch实现)

🍨 本文为🔗365天深度学习训练营中的学习记录博客🍖 原作者：K同学啊前言 LSTM模型一直是一个很经典的模型，这个模型当然也很复杂，一般需要先学习RNN、GRU模型之后再学，GRU、LSTM的模型讲解将…...

编程日记 2025/6/1 20:09:56

云消息队列 Kafka 版 V3 系列荣获信通院“云原生技术创新标杆案例”

2024 年 12 月 24 日，由中国信息通信研究院（以下简称“中国信通院”）主办的“2025 中国信通院深度观察报告会：算力互联网分论坛”，在北京隆重召开。本次论坛以“算力互联网新质生产力”为主题，全面展示中国…...

编程日记 2025/6/2 21:47:10

centos 安全配置基线

centos 安全配置基线一、系统防火墙及SE系统1. 系统自带防火墙iptables（Centos6）基础命令查看防火墙设置使用命令查看防火墙设置使用命令清除防火墙设置防火墙策略开放指定的端口屏蔽IP 2. 系统自带防火墙firewalled（Centos7）基础…...

编程日记 2025/5/28 20:44:21

语音技术在播客领域的应用（2）

播客是以语音为主，各种基于AI 的语音技术在播客领域十分重要。语音转文本 Whisper Whisper 是OpenAI 推出的开源语音辨识工具，可以把音档转成文字，支援超过50 种语言。这款工具是基于68 万小时的训练资料，其中包含11.7 万小时的…...

编程日记 2025/6/4 9:21:13

html的iframe页面给帆软BI发送消息

需求：帆软的网页组件嵌套一个HTML页面，HTML页面要给帆软发消息。解决方法是：fineReportWindow.duchamp.getWidgetByName("txt1").setValue(666); <!DOCTYPE html> <html lang"en"> <head> <…...

编程日记 2025/6/1 17:04:58

Dart语言的字符串处理

Dart语言的字符串处理目录引言字符串的定义与基本特性字符串的创建字符串的操作字符串拼接字符串截取字符串替换字符串分割字符串查询字符串格式化正则表达式在字符串处理中的应用字符串编码与解码示例代码总结 1. 引言在现代编程中，字符串处理是一个非常重要…...

编程日记 2025/6/1 18:20:13

目录

通过 children 属性结合条件渲染

通过 children 和 slot 属性实现具名插槽

通过 props 实现具名插槽

相关文章：