svelte5中使用react组件

在svelet5中导入并使用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

  2. 安装react相关依赖

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

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

    import { sveltekit } from '@sveltejs/kit/vite';
    import { defineConfig } from 'vite';
    import react from '@vitejs/plugin-react'; # <---- here

    export default defineConfig({
    plugins: [sveltekit(), react()] # <---- here
    });

  4. 创建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>

目前此部分适配器有问题, 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>

相关推荐
我在北京coding18 分钟前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js
前端开发与ui设计的老司机42 分钟前
UI前端与数字孪生结合实践探索:智慧物流的货物追踪与配送优化
前端·ui
全能打工人44 分钟前
前端查询条件加密传输方案(SM2加解密)
前端·sm2前端加密
翻滚吧键盘1 小时前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
秃了也弱了。2 小时前
Chrome谷歌浏览器插件ModHeader,修改请求头,开发神器
前端·chrome
乆夨(jiuze)2 小时前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
忧郁的蛋~2 小时前
HTML表格导出为Excel文件的实现方案
前端·html·excel
小彭努力中2 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互
然我3 小时前
别再只用 base64!HTML5 的 Blob 才是二进制处理的王者,面试常考
前端·面试·html
NanLing3 小时前
【纯前端推理】纯端侧 AI 对象检测:用浏览器就能跑的深度学习模型
前端