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>

相关推荐
li357416 小时前
将已有 Vue 项目通过 Electron 打包为桌面客户端的完整步骤
前端·vue.js·electron
Icoolkj17 小时前
VuePress 与 VitePress 深度对比:特性、差异与选型指南
前端·javascript·vue.js
excel17 小时前
CNN 分层详解:卷积、池化到全连接的作用与原理
前端
excel17 小时前
CNN 多层设计详解:从边缘到高级特征的逐层学习
前端
西陵18 小时前
Nx带来极致的前端开发体验——任务编排
前端·javascript·架构
大前端helloworld19 小时前
从初中级如何迈入中高级-其实技术只是“入门卷”
前端·面试
东风西巷20 小时前
Balabolka:免费高效的文字转语音软件
前端·人工智能·学习·语音识别·软件需求
萌萌哒草头将军20 小时前
10个 ES2025 新特性速览!🚀🚀🚀
前端·javascript·vue.js
半夏陌离20 小时前
SQL 入门指南:排序与分页查询(ORDER BY 多字段排序、LIMIT 分页实战)
java·前端·数据库