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

svelte5中使用react组件

news 来源：原创 2025/5/6 12:56:09

在svelet5中导入并使用react组件库

svelte5中使用react组件

svelte5中使用react组件

在svelet5中导入并使用react组件库, 示例项目地址：https://github.com/shenshouer/my-svelte-react

在svelte5中当前还有问题，无法将children传递到react中渲染

使用svletkit创建项目

$ npx sv create my-svelte-react% npx sv create my-svelte-react
┌  Welcome to the Svelte CLI! (v0.6.10)
│
◇  Which template would you like?
│  SvelteKit minimal
│
◇  Add type checking with Typescript?
│  Yes, using Typescript syntax
│
◆  Project created
│
◇  What would you like to add to your project? (use arrow keys / space bar)
│  none
│
◇  Which package manager do you want to install dependencies with?
│  pnpm
│
◆  Successfully installed dependencies
│
◇  Project next steps ─────────────────────────────────────────────────────╮
│                                                                          │
│  1: cd my-svelte-react                                                   │
│  2: git init && git add -A && git commit -m "Initial commit" (optional)  │
│  3: pnpm run dev --open                                                  │
│                                                                          │
│  To close the dev server, hit Ctrl-C                                     │
│                                                                          │
│  Stuck? Visit us at https://svelte.dev/chat                              │
│                                                                          │
├──────────────────────────────────────────────────────────────────────────╯
│
└  You're all set!$ cd my-svelte-react$ pnpm install$ pnpm dev

安装react相关依赖

$ pnpm i react react-dom
$ pnpm i --save-dev @types/react @types/react-dom
$ pnpm add @vitejs/plugin-react -D

修改vite.config.ts增加react支持

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';  # <---- hereexport default defineConfig({plugins: [sveltekit(), react()]        # <---- here
});

创建react svelte适配器ReactAdapter.svelte, 代码如下:

# src/lib/utils/ReactAdapter.svelte<script lang="ts">import React from "react";import ReactDOM from "react-dom/client";import { onDestroy, onMount } from "svelte";const e = React.createElement;let container: HTMLElement;let root: ReactDOM.Root;onMount(() => {const { el, children, class: _, ...props } = $$props;try {root = ReactDOM.createRoot(container);root.render(e(el, props, children));} catch (err) {console.warn(`react-adapter failed to mount.`, { err });}});onDestroy(() => {try {if (root) {root.unmount();}} catch (err) {console.warn(`react-adapter failed to unmount.`, { err });}});
</script><div bind:this={container} class={$$props.class}></div>

目前此部分适配器有问题, children无法获取并且在react组件中渲染

参考：
props-and-restProps
issues

添加react组件库, 如 ant design

$ pnpm add antd# +page.svelte<script lang="ts">import { Button } from "antd";import ReactAdapter from "$lib/utils/ReactAdapter.svelte";
</script><ReactAdapter el={Button} type="primary">Hello, World!</ReactAdapter>

svelte5中使用react组件

在svelet5中导入并使用react组件库 svelte5中使用react组件 svelte5中使用react组件在svelet5中导入并使用react组件库, 示例项目地址：https://github.com/shenshouer/my-svelte-react 在svelte5中当前还有问题，无法将children传递到react中渲染使用…...

编程日记 2025/5/6 12:56:09

Linux 文件的特殊权限—ACL项目练习

本文为Ubuntu Linux操作系统- 第二十一期~~ 上期回顾: 【ACL权限控制详解】更多Linux 相关内容请点击👉【Linux专栏】~ 主页：【练小杰的CSDN】文章目录项目项目要求具体的设置命令如下问题2问题3第一步：设置默认ACL前，在projec…...

编程日记 2025/5/6 12:53:22

游戏引擎学习第76天

确保一切正常并计划今天的内容在本次开发中，我们正在集中精力处理引擎中的三维功能，尤其是如何有效地处理多层结构，比如在多个楼层之间行走，或者在房间上方可以看到下方的房间。我们的目标是避免使用临时解决方案或黑客方式&…...

编程日记 2025/5/4 20:28:55

【Linux-多线程】POSIX信号量-基于环形队列生产消费模型

POSIX信号量 POSIX信号量和System V信号量作用相同，都是用于同步操作，达到无冲突的访问共享资源的目的。但POSIX可以用于线程间同步 1.快速认识信号量接口 POSIX信号量分为两种类型： 命名信号量（Named Semaphores）&…...

编程日记 2025/5/6 12:26:29

电脑32位和64位之区别（Difference between 32-Bit and 64 Bit Computers）

电脑32位和64位之区别很多小伙伴还不知道电脑32位和64位是什么意思，今天小编就来普及一下。 32位和64位是指电脑处理器（CPU）和操作系统的架构，决定了电脑如何处理数据、存储信息、运行程序等。 32位和64位是指电脑系统中每个处…...

编程日记 2025/5/1 4:51:35

1688平台商品关键词搜索的多样性与Python爬虫应用实践

在当今这个信息化、数字化飞速发展的时代，电子商务平台已经成为人们日常生活中不可或缺的一部分。而1688作为国内知名的B2B电商平台，凭借其庞大的商品种类和丰富的供应链资源，为无数商家和消费者提供了便捷的交易渠道。除了广受关注的女装品类…...

编程日记 2025/5/6 11:14:08

2025年：AI化浪潮中的社会变迁与商业革新

随着人工智能（AI）技术的迅猛发展，2025年将成为一个转折点。这一年，AI不仅将深入到日常生活和商业运营的各个角落，还将引发一系列深刻的社会、经济和技术变革。以下是对未来一年可能出现的“AI化”现象的预测与展望。 AI进入主流文化的标志超级碗广告：在2025年的超级碗上…...

编程日记 2025/5/6 11:22:48

JS scrollIntoView 技巧揭秘：解锁网页流畅交互

文章目录一.基本概念二.语法和参数基本语法：element.scrollIntoView();参数详解： 三.应用场景和示例场景一：点击目录点位到相应的位置React 示例代码：Vue3 示例代码： 场景二：轮播图定位到指定图片示例代码…...

编程日记 2025/5/3 6:17:00

精选2款.NET开源的博客系统

前言博客系统是一个便于用户创建、管理和分享博客内容的在线平台，今天大姚给大家分享2款.NET开源的博客系统。 StarBlog StarBlog是一个支持Markdown导入的开源博客系统，后端基于最新的.Net6和Asp.Net Core框架，遵循RESTFul接口规范&…...

编程日记 2025/5/6 11:52:44

1.CSS的复合选择器

1.1 什么是复合选择器在CSS中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基础选择器进行组合形成的。复合选择器可以更精准、更高效的选择目标元素（标签） 复…...

编程日记 2025/5/6 3:58:18

sys.dm_exec_connections：查询与 SQL Server 实例建立的连接有关的信息以及每个连接的详细信息（客户端ip）

文章目录引言I 基于dm_exec_connections查询客户端ip权限物理联接时间范围dm_exec_connections表see also: 监视SQL Server 内存使用量资源信号灯 DMV sys.dm_exec_query_resource_semaphores（确定查询执行内存的等待）引言查询历史数据库客户端ip应用场景：安全分析缺乏…...

编程日记 2025/5/5 22:19:49

gitee 使用教程

前言 Gitee 是一个中国的开源代码托管平台，类似于 GitHub，旨在为开发者提供一个高效、稳定、安全的代码管理和协作开发环境。Gitee 支持 Git 协议，可以托管 Git 仓库，进行版本控制、代码协作、项目管理等操作。 1. Gitee 的主要…...

编程日记 2025/5/6 12:46:27

HTMLHTML5革命：构建现代网页的终极指南 - 0. 课程目录设计

结构清晰，层层递进课程从基础知识（如HTML学前必知）开始，逐步深入到高级应用（如PWA配置和WebApp优化）。每个模块都有明确的目标，适合零基础学员逐步掌握HTML。覆盖范围广这套课程涵盖了HTM…...

编程日记 2025/5/6 12:47:55

嵌入式系统（2.嵌入式硬件系统基础）

2.嵌入式硬件系统基础 2.1嵌入式硬件系统的组成嵌入式硬件系统以嵌入式微处理器为核心，主要由嵌入式微处理器、总线、存储器、输入/输出接口和设备组成。嵌入式微处理器嵌入式微处理器采用冯诺依曼结构或哈佛结构：前者指令和数据共享同一存储空间…...

编程日记 2025/5/6 11:58:46

Vue3轮播图的实现：vue3-carousel的使用和配置

vue3-carousel 是一个用于 Vue 3 的轻量级、响应式、功能强大的轮播组件。它允许你轻松创建可以滚动的图片或内容滑块。下面是关于如何安装、使用以及配置 vue3-carousel 的一些示例和详细说明。目录一、安装 vue3-carousel 二、引入三、轮播全局样式修改一、安装 vue3-…...

编程日记 2025/4/28 21:19:52

Spring AI ectorStore

Spring AI中的VectorStore是一种用于存储和检索高维向量数据的数据库或存储解决方案，它在AI应用中扮演着至关重要的角色。以下是对Spring AI VectorStore的详细解析： 一、VectorStore的基本概念定义：VectorStore特别适用于处理那些经过嵌入…...

编程日记 2025/5/5 3:16:46

uniapp vue2版本如何设置i18n

如何设置i18n在该软件设置过语言的情况下优先选择所设置语言，在没有设置的情况下，获取本系统默认语言就，将系统默认语言设置为当前选择语言。 1、下载依赖： npm install vue-i18n --save 2、创建相关文件（在最外层&…...

编程日记 2025/4/29 15:33:47

【2024华为OD-E卷-100分-boss的收入】（题目+思路+JavaC++Python解析)

题目描述题目：boss的收入在一个公司中，有一个老板（boss）和若干名员工（employees）。老板和员工的收入信息存储在一个数组中，其中数组的每个元素表示一个人的收入。数组的第0个元素表示老板的…...

编程日记 2025/5/6 11:08:58

若依 ruoyi-vue HandlerInterceptor 拦截器文件接口自定义权限

文件资源添加自定义权限 package com.huida.framework.config;import com.huida.framework.interceptor.FileInterceptor; import com.huida.framework.interceptor.RequestInterceptor; import org.springframework.beans.factory.annotation.Autowired; import org.springfr…...

编程日记 2025/4/28 3:01:48

在离线环境中安装 `.rpm` 包的步骤

在一些环境中，可能无法直接通过网络安装软件包。特别是在没有互联网连接的情况下，我们仍然可以手动下载 .rpm 安装包并进行离线安装。本文将介绍如何在离线环境中安装多个 .rpm 包，确保软件的顺利安装和依赖关系的处理。 1. 将 .rpm 文件复制…...

编程日记 2025/4/30 21:21:54

Python----Python爬虫（selenium的使用，定位元素，层级定位）

一、介绍与安装 Selenium是一个Web的自动化测试工具，最初是为网站自动化测试而开发的，类型像我们玩游戏用的按键精灵，可以按指定的命令自动操作，不同是Selenium 可以直接运行在浏览器上，它支持所有主流的浏览器。 Sele…...

编程日记 2025/5/2 21:49:31

Docker 服务、镜像、容器之命令（Docker Services, Images, and Container Commands）

Docker 服务、镜像、容器之命令 Docker是一个强大的容器化平台，能够帮助开发者高效地构建、部署和管理应用程序。本文将详细介绍Docker的服务命令、镜像命令和容器命令，帮助你快速上手Docker。一、Docker的服务相关命令在使用Docker之前&#xff0c…...

编程日记 2025/4/27 17:47:31

当歌 - RSS 订阅分发平台开发

以下将详细介绍当歌平台的技术架构、功能实现以及相关代码逻辑。一、项目概述当歌是一个极简的 RSS 订阅分发平台，旨在为用户提供便捷的 RSS 管理和订阅服务，帮助用户轻松获取和分享最新资讯。二、技术架构后端语言：PHP 数据库&#…...

编程日记 2025/4/29 9:53:13

vue3使用AntV X6 (图可视化引擎)历程[二]

通过h函数动态展示自定义节点内容一、案例效果二、案例代码父组件. BloodTopology.vue <template><div><TopologyCompact><template #main-board-box><TopologyDependent domId"featureBloodContainer" :nodeData"originalNode…...

编程日记 2025/5/3 3:38:44

爬虫学习记录

1.概念通过编写程序,模拟浏览器上网,然后让其去互联网上抓取数据的过程通用爬虫:抓取的是一整张页面数据聚焦爬虫:抓取的是页面中的特定局部内容增量式爬虫:监测网站中数据更新的情况,只会抓取网站中最新更新出来的数据 robots.txt协议: 君子协议,网站后面添加robotx.txt…...

编程日记 2025/5/5 21:38:39

Erlang语言的函数实现

Erlang语言函数实现的深度探讨引言 Erlang是一种并发编程语言，最初由爱立信公司为电信系统开发。它以其强大的并发处理能力和容错机制而闻名，广泛应用于实时系统和分布式系统。本文将详细探讨Erlang语言中的函数实现，包括函数的定义、调用…...

编程日记 2025/4/29 12:22:11

LLM之RAG实战（五十一）| 使用python和Cypher解析PDF数据，并加载到Neo4j数据库

一、必备条件： python语言Neo4j数据库python库：neo4j、llmsherpa、glob、dotenv 二、代码： from llmsherpa.readers import LayoutPDFReaderfrom neo4j import GraphDatabaseimport uuidimport hashlibimport osimport globfrom datetime …...

编程日记 2025/5/5 7:51:52

单例模式-如何保证全局唯一性？

以下是几种实现单例模式并保证全局唯一性的方法： 1. 饿汉式单例模式 class Singleton { private:// 私有构造函数，防止外部创建对象Singleton() {}// 静态成员变量，存储单例对象static Singleton instance; public:// 公有静态成员函数&…...

编程日记 2025/5/2 13:33:58

05、Docker学习，常用安装：Mysql、Redis、Nginx、Nacos

Docker学习，常用安装：Mysql、Redis、Nginx、Nacos 一、Docker安装Mysql 1、docker search mysql ##查找mysql版本都有哪些 2、docker pull mysql:5.6 ##下载5.6版本的mysql镜像 3、docker run -p 13306:3306 --name mysql ##运行…...

编程日记 2025/5/6 5:24:32

docker 启动redis 守护进程

文章目录前言一、整体流程二、状态图三、结语前言在现代软件开发中，缓存和消息队列是提高应用性能和扩展性的关键。Redis 是一种流行的内存数据结构存储系统，它支持多种类型的数据结构，如字符串、哈希、列表、集合、有序集合等。使用 Doc…...

编程日记 2025/4/27 12:07:11

Angular由一个bug说起之十三：Cross Origin

跨域想要了解跨域，首要要了解源什么是源，源等于协议加域名加端口号只有这三个都相同，才是同源，反之则是非同源。比如下面这四个里，只有第4个是同源而浏览器给服务器发送请求时，他们的源一样&#xff0…...

编程日记 2025/4/27 3:26:57

为深度学习引入张量

为深度学习引入张量什么是张量？ 神经网络中的输入、输出和转换都是使用张量表示的，因此，神经网络编程大量使用张量。张量是神经网络使用的主要数据结构。张量的概念是其他更具体概念的数学概括。让我们看看一些张量的具体实例。张量…...

编程日记 2025/5/1 20:23:50

opencv摄像头标定程序实现

摄像头标定是计算机视觉中的一个重要步骤，用于确定摄像头的内参（如焦距、主点、畸变系数等）和外参（如旋转矩阵和平移向量）。OpenCV 提供了方便的工具来进行摄像头标定。下面分别给出 C 和 Python 的实现。 1. C 实现…...

编程日记 2025/5/5 0:09:17

Flutter：封装一个自用的bottom_picker选择器

效果图：单列选择器使用bottom_picker: ^2.9.0实现，单列选择器，官方文档 pubspec.yaml # 底部选择 bottom_picker: ^2.9.0picker_utils.dart AppTheme：自定义的颜色 TextWidget.body Text() <Widget>[].toRow Row()下边代…...

编程日记 2025/5/4 17:20:40

Docker 容器自动化管理之脚本(Script for Docker Container Automation Management)

Docker 容器自动化管理之脚本简介 Docker‌是一个开源的容器化平台，旨在简化应用程序的开发、部署和运行过程。它通过将应用程序及其依赖项打包到一个可移植的容器中，使得开发人员能够在不同的环境中以一致的方式构建、打包和分发应用程序‌。 Docke…...

编程日记 2025/4/30 8:52:21

client-go中watch机制的一些陷阱

Reference https://stackoverflow.com/questions/51399407/watch-in-k8s-golang-api-watches-and-get-events-but-after-sometime-doesnt-get-an 问题描述最近在使用 client-go 的 watch 机制监听 k8s 中的 deployment 资源时，发现一个奇怪的现象先看下代码&a…...

编程日记 2025/5/3 17:04:33

用户界面的UML建模11

然而，在用户界面方面，重要的是要了解《boundary》类是如何与这个异常分层结构进行关联的。《exception》类的对象可以作为《control》类的对象。因此，《exception》类能够聚合《boundary》类。参见图12，《exception》Database…...

编程日记 2025/4/25 21:12:07

计算机网络之---数据链路层的功能与作用

数据链路层概念数据链路层（Data Link Layer）是计算机网络中的第二层，它位于物理层和网络层之间，主要负责数据在物理链路上的可靠传输。其基本功能是将网络层传来的数据分成帧，并负责在物理链路上可靠地传输这些数据帧…...

编程日记 2025/5/2 16:55:48

添加到 PATH 环境变量中

命令解释 # 将命令中的<CLI_PATH>替换为您aliyun文件的所在目录。 echo export PATH$PATH:<CLI_PATH> >> ~/.bash_profile echo export PATH$PATH:/data2/ljsang/aliyun/aliyun >> ~/.bash_profileexport PATH$PATH:/data2/ljsang/aliyun/aliyun&…...

编程日记 2025/5/3 15:36:46

【51单片机零基础-chapter6:LCD1602调试工具】

实验0-用显示屏LCD验证自己的猜想如同c的cout,前端的console.log() #include <REGX52.H> #include <INTRINS.H> #include "LCD1602.h" int var0; void main() {LCD_Init();LCD_ShowNum(1,1,var211,5);while(1){;} }实验1-编写LCD1602液晶显示屏驱动函…...

编程日记 2025/4/30 6:29:29

Linux 内核中的 netif_start_queue 函数：启动网络接口发送队列的关键

在 Linux 内核的网络子系统中，netif_start_queue 函数扮演着至关重要的角色。这个函数的主要功能是启动（或启用）网络接口的发送队列，标志着网络接口已经准备好开始发送数据包。本文将深入探讨 netif_start_queue 函数的用途、工作原理以及在实际网络驱动代码中的应用。函…...

编程日记 2025/5/4 17:25:57

（七）人工智能进阶之人脸识别：从刷脸支付到智能安防的奥秘，小白都可以入手的MTCNN+Arcface网络

零、开篇趣谈还记得第一次用支付宝"刷脸"时的新奇感吗？或者被抖音的人脸特效逗乐的瞬间？这些有趣的应用背后，其实藏着一个精妙的AI世界。今天，就让我们开启一段奇妙的人脸识别技术探索之旅吧！ 一、人脸识…...

编程日记 2025/4/29 15:33:48

ExcelDataReader：一个.Net高性能Excel开源读取器

推荐一个用于读取Microsoft Excel文件的高性能开源库。 01 项目简介 ExcelDataReader是一个功能强大且易于使用的开源项目，提供了丰富的读取API，专门读取Excel文件的数据，特别是处理大数据量的情况。 ExcelDataReader支持Excel版本从2007年…...

编程日记 2025/5/5 20:48:45

人工智能-机器学习之多元线性回归（项目实践一）

目标：运用scikit-learn进行多元线性回归方程的构建，通过实际案例的训练集和测试集进行预测，最终通过预测结果和MSE来评估预测的精度。一、首先安装scikit-learn：pip install scikit-learn C:\Users\CMCC\PycharmProjects\AiPro…...

编程日记 2025/5/5 17:45:20

Mysql--基础篇--约束（主键，外键，唯一，检查，枚举及复合约束等）

在MySQL中，约束（Constraints）是用于确保数据库中数据完整性和一致性的规则。通过定义约束，可以防止用户插入、更新或删除不符合特定条件的数据，从而保证数据的准确性和可靠性。MySQL支持多种类型的约束，每种…...

编程日记 2025/5/2 5:32:13

经典多模态模型CLIP - 直观且详尽的解释

对比语言-图像预训练（CLIP），这是一种创新的多模态建模策略，能够创建视觉和语言的联合表示。CLIP 的效果非常出色，可以用于构建高度特定且性能卓越的分类器，而无需任何训练数据。本文将深入探讨其理论基础&a…...

编程日记 2025/5/4 20:45:10

着丝粒鉴定CentIER v3.0安装与使用-bioinfomatics tools41

使用CentIE鉴定着丝粒 T2T基因组端粒与着丝粒的区别及其鉴定方法-随笔02_chip-seq鉴定着丝粒-CSDN博客 T2T时代的基因组组装-文献精读-9_基因组t2t组装-CSDN博客桑树T2T基因组-文献精读16_桑树基因组-CSDN博客辣椒属2个T2T基因组-文献精读23_辣椒基因组-CSDN博客大花…...

编程日记 2025/5/6 8:37:50

Objective-C语言的多线程编程

Objective-C语言的多线程编程在现代应用程序开发中，尤其是移动应用开发，多线程编程是一个不可或缺的部分。使用多线程可以提升应用的响应能力，使得可以同时处理多个任务，从而优化用户体验。在本文中，我们将深入探讨O…...

编程日记 2025/4/26 7:06:38

Golang的并发编程框架比较

# Golang的并发编程框架比较中的并发编程在现代软件开发中，处理高并发的能力愈发重要。Golang作为一门支持并发编程的编程语言，提供了丰富的并发编程框架和工具，使得开发者能够更轻松地处理并发任务。本文将介绍Golang中几种常用的并发编程…...

编程日记 2025/4/30 4:58:32

通过 oh-my-posh posh-git 优化PowerShell

转自oh-my-posh & posh-git 提升在 windows 环境的开发体验 oh-my-posh 是用于自定义 PowerShell 主题和配色的工具，posh-git 则是为 PowerShell 提供了方便的 git 状态显示和命令补全功能。安装PowerShell 7和 winget下载器，都可以直接在 Microsof…...

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

在svelet5中导入并使用react组件库

svelte5中使用react组件

相关文章：