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

svelte5中使用react组件

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

  • svelte5中使用react组件

svelte5中使用react组件

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

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

  1. 使用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
  1. 安装react相关依赖
$ pnpm i react react-dom
$ pnpm i --save-dev @types/react @types/react-dom
$ pnpm add @vitejs/plugin-react -D
  1. 修改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
});
  1. 创建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

  1. 添加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组件库, 示例项目地址&#xff1a;https://github.com/shenshouer/my-svelte-react 在svelte5中当前还有问题&#xff0c;无法将children传递到react中渲染 使用…...

iOS - 自定义引用计数(MRC)

自定义引用计数&#xff08;Custom Reference Counting&#xff09;是指类可以通过重写 retain/release 等方法来实现自己的引用计数管理机制。这通常用于特殊场景下的内存管理优化。 1. 判断是否使用自定义引用计数 inline bool objc_object::hasCustomRR() {// 检查类是否…...

北航现实场景无人机VLN新基准! OpenUAV:面向真实环境的无人机视觉语言导航,平台、基准与方法

作者&#xff1a;Xiangyu Wang, Donglin Yang, Ziqin Wang, Hohin Kwan, Jinyu Chen, Wenjun Wu1, Hongsheng Li, Yue Liao, Si Liu 单位&#xff1a;北京航空航天大学人工智能学院&#xff0c;香港中文大学多媒体实验室&#xff0c;感知与交互智能中心 原文链接&#xff1a;…...

OpenCV计算机视觉 08 图像的旋转

图像的旋转 下面是一张小猪佩奇的照片&#xff0c;请进行顺时针90度&#xff0c;逆时针90度&#xff0c;180度旋转 方法一&#xff1a;使用了 NumPy 库的 np.rot90() 函数来实现图像的旋转 np.rot90(img, k-1) 表示将输入的图像 img 顺时针旋转 90 度&#xff0c; np.rot90(…...

C++感受15-Hello STL 泛型启蒙

生鱼片和STL的关系&#xff0c;你听过吗&#xff1f;泛型编程和面向对象编程&#xff0c;它们打架吗&#xff1f;行为泛型和数据泛型&#xff0c;各自的目的是&#xff1f; 0 楔 俄罗斯生鱼片&#xff0c;号称俄罗斯版的中国烤鸭&#xff0c;闻名于世。其鱼肉&#xff0c;源于…...

【Java 学习】对象赋值的艺术:Java中clone方法的浅拷贝与深拷贝解析,教你如何在Java中实现完美复制

&#x1f4ac; 欢迎讨论&#xff1a;如对文章内容有疑问或见解&#xff0c;欢迎在评论区留言&#xff0c;我需要您的帮助&#xff01; &#x1f44d; 点赞、收藏与分享&#xff1a;如果这篇文章对您有所帮助&#xff0c;请不吝点赞、收藏或分享&#xff0c;谢谢您的支持&#x…...

基于高斯混合模型的数据分析及其延伸应用(具体代码分析)

一、代码分析 &#xff08;一&#xff09;清除工作区和命令行窗口 clear; clc;clear;&#xff1a;该命令用于清除 MATLAB 工作区中的所有变量&#xff0c;确保代码运行环境的清洁&#xff0c;避免之前遗留的变量对当前代码运行产生干扰。例如&#xff0c;如果之前运行的代码中…...

无人机+Ai应用场景!

军事领域 无人机AI制导技术在军事领域的应用尤为突出。通过AI技术&#xff0c;无人机可以自主执行侦察、监视、打击等多种任务&#xff0c;极大地提高了军事行动的效率和准确性。 侦察与监视&#xff1a;AI无人机能够利用先进的传感器和摄像头&#xff0c;对目标区域进行大范…...

操作手册:集成钉钉审批实例消息监听配置

此文档将记录在慧集通平台怎么实现钉钉审批实例结束或发起或取消时&#xff0c;能够实时的将对应的实例数据抓取出来送入第三方系统 集成平台配置 1、配置中心库&#xff0c;存储钉钉发送的消息&#xff0c;可以忽略&#xff0c;若不配置&#xff0c;则钉钉的消息将不再记录到…...

AI大模型-提示工程学习笔记4

卷首语&#xff1a;我所知的是我自己非常无知&#xff0c;所以我要不断学习。 写给AI入行比较晚的小白们&#xff08;比如我自己&#xff09;看的&#xff0c;大神可以直接路过无视了。 不同主题提示词可以完成不同基本任务&#xff0c;常见的提示主题有&#xff1a; 文本概…...

Vue3.5 企业级管理系统实战(一):项目初始搭建与配置

本文详细介绍了如何使用 Vite 构建一个高效的 Vue 3.5 项目框架&#xff0c;并整合了 ESLint、Prettier、EditorConfig、Husky、lint-staged 和 commitlint 等现代化开发工具。通过这些工具的集成&#xff0c;我们能够确保代码质量、格式化和提交规范的一致性&#xff0c;从而提…...

缓存-Redis-缓存更新策略-主动更新策略-Cache Aside Pattern(全面 易理解)

**Cache-Aside Pattern&#xff08;旁路缓存模式&#xff09;**是一种广泛应用于缓存管理的设计模式&#xff0c;尤其在使用 Redis 作为缓存层时尤为常见。该模式通过在应用程序与缓存之间引入一个旁路&#xff0c;确保数据的一致性和高效性。本文将在之前讨论的 Redis 主动更新…...

杭州市有哪些大学能够出具论文检索报告?

杭州市具有查收查引服务的学校有浙江大学、杭州电子科技大学、浙江工业大学、杭州师范大学等高校。 1、浙江大学图书馆 浙江大学图书馆提供文献查收查引服务&#xff0c;包括查询学术论文被SCIE、SSCI、A&HCI、EI、CPCI-S、CPCI-SSH、CSSCI、CSCD等国内外权威数据库收录和…...

SpringBootWeb 登录认证(day12)

登录功能 基本信息 请求参数 参数格式&#xff1a;application/json 请求数据样例&#xff1a; 响应数据 参数格式&#xff1a;application/json 响应数据样例&#xff1a; Slf4j RestController public class LoginController {Autowiredpriva…...

使用AOP在切面逻辑中无法获取到requesetBody

使用场景&#xff1a;在接口处理之前&#xff0c;我们需要拿到请求参数&#xff0c;对参数进行校验。注意&#xff0c;这里需要拿到的是原始的请求信息&#xff01; 一般的获取方式 ServletInputStream inputStream request.getInputStream(); StringBuilder stringBuilder …...

生成模型:变分自编码器-VAE

1.基本概念 1.1 概率 这里有&#xff1a; x为真实图像&#xff0c;开源为数据集, 编码器将其编码为分布参数 x ^ \hat{x} x^为生成图像, 通过解码器获得 p ( x ) ^ \hat{p(x)} p(x)^​: 观测数据的分布, 即数据集所构成的经验分布 p r e a l ( x ) p_{real}(x) preal​(x): …...

Hive sql执行文件合并配置参数

HIVE自动合并输出的小文件的主要优化手段为&#xff1a;HIVE将会启动一个独立的map-reduce任务进行输出文件的merge。 set hive.merge.mapfiles true&#xff1a; 在只有map的作业结束时合并小文件&#xff0c; set hive.merge.mapredfiles true&#xff1a; 在Map-Reduce的任…...

鸿蒙 ArkUI实现地图找房效果

常用的地图找房功能&#xff0c;是在地图上添加区域、商圈、房源等一些自定义 marker&#xff0c;然后配上自己应用的一些筛选逻辑构成&#xff0c;在这里使用鸿蒙 ArkUI 简单实现下怎么添加区域/商圈、房源等 Marker. 1、开启地图服务 在华为开发者官网&#xff0c;注册应用&…...

一套极简易的直流无刷电机(Deng FOC)开发套件介绍

目录 概述 1. 硬件组成介绍 1.1 主要硬件 1.2 电机驱动板介绍 1.3 2208电机模块 1.3.1 参数介绍 1.3.2 认识2208电机 2 驱动板接口介绍 2.1 PCB接口&#xff08;MCU&#xff09;定义 2.2 功能描述 2.2.1 电机驱动接口 2.2.2 编码器接口 2.2.3 电流输入引脚接口 2.…...

Inception模型详解及代码分析

模型背景 Inception系列模型由Google团队提出,旨在解决CNN分类模型面临的两大挑战: 如何在增加网络深度的同时提升分类性能 如何在保证分类准确率的同时降低计算和内存开销 Inception V1通过引入 并行卷积结构 和 1x1卷积 ,巧妙地解决了这两个问题,在保证模型质量的前提下…...

云原生核心技术 (7/12): K8s 核心概念白话解读(上):Pod 和 Deployment 究竟是什么?

大家好&#xff0c;欢迎来到《云原生核心技术》系列的第七篇&#xff01; 在上一篇&#xff0c;我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在&#xff0c;我们就像一个拥有了一块崭新数字土地的农场主&#xff0c;是时…...

linux之kylin系统nginx的安装

一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源&#xff08;HTML/CSS/图片等&#xff09;&#xff0c;响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址&#xff0c;提高安全性 3.负载均衡服务器 支持多种策略分发流量…...

微信小程序之bind和catch

这两个呢&#xff0c;都是绑定事件用的&#xff0c;具体使用有些小区别。 官方文档&#xff1a; 事件冒泡处理不同 bind&#xff1a;绑定的事件会向上冒泡&#xff0c;即触发当前组件的事件后&#xff0c;还会继续触发父组件的相同事件。例如&#xff0c;有一个子视图绑定了b…...

React Native 开发环境搭建(全平台详解)

React Native 开发环境搭建&#xff08;全平台详解&#xff09; 在开始使用 React Native 开发移动应用之前&#xff0c;正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南&#xff0c;涵盖 macOS 和 Windows 平台的配置步骤&#xff0c;如何在 Android 和 iOS…...

Python:操作 Excel 折叠

💖亲爱的技术爱好者们,热烈欢迎来到 Kant2048 的博客!我是 Thomas Kant,很开心能在CSDN上与你们相遇~💖 本博客的精华专栏: 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...

《Playwright:微软的自动化测试工具详解》

Playwright 简介:声明内容来自网络&#xff0c;将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具&#xff0c;支持 Chrome、Firefox、Safari 等主流浏览器&#xff0c;提供多语言 API&#xff08;Python、JavaScript、Java、.NET&#xff09;。它的特点包括&a…...

全球首个30米分辨率湿地数据集(2000—2022)

数据简介 今天我们分享的数据是全球30米分辨率湿地数据集&#xff0c;包含8种湿地亚类&#xff0c;该数据以0.5X0.5的瓦片存储&#xff0c;我们整理了所有属于中国的瓦片名称与其对应省份&#xff0c;方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...

智能在线客服平台:数字化时代企业连接用户的 AI 中枢

随着互联网技术的飞速发展&#xff0c;消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁&#xff0c;不仅优化了客户体验&#xff0c;还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用&#xff0c;并…...

使用van-uploader 的UI组件,结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui&#xff08;适配 Vue2 版本 &#xff09;实现截图中照片上传预览、删除功能&#xff0c;并封装成可复用组件的完整代码&#xff0c;包含样式和逻辑实现&#xff0c;可直接在 Vue2 项目中使用&#xff1a; 1. 封装的图片上传组件 ImageUploader.vue <te…...

基于Docker Compose部署Java微服务项目

一. 创建根项目 根项目&#xff08;父项目&#xff09;主要用于依赖管理 一些需要注意的点&#xff1a; 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件&#xff0c;否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...