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>

相关推荐
JosieBook1 小时前
【前端】Vue3 前端项目实现动态显示当前系统时间
前端·vue3·系统时间
Data_Adventure1 小时前
AI让我6天开发完移动端大屏编辑器,卷吗?
前端
MiyueFE1 小时前
Nuxt 4.0 深度解析:从架构革新到实战迁移 🚀
前端·nuxt.js
天天向上的鹿茸1 小时前
web前端用MVP模式搭建项目
前端·javascript·设计模式
暖木生晖2 小时前
动画序列——实现一个div转一圈的效果
前端·css·html·css3·html5
山河木马2 小时前
前端学C++可太简单了:导入标准库
前端·javascript·c++
Hilaku2 小时前
你不会使用css函数 clamp()?那你太low了😀
前端·css·html
三小河2 小时前
解决小项目中的频繁部署-适用于没有Jenkins或者没有配置流水线的前端部署
前端
胡gh2 小时前
线程与进程:从零开始理解它们的区别与联系
前端·javascript·后端