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>

相关推荐
SUPER52663 小时前
FastApi项目启动失败 got an unexpected keyword argument ‘loop_factory‘
java·服务器·前端
sanx183 小时前
专业电竞体育数据与系统解决方案
前端·数据库·apache·数据库开发·时序数据库
你的人类朋友5 小时前
【Node】认识一下Node.js 中的 VM 模块
前端·后端·node.js
Cosolar5 小时前
FunASR 前端语音识别代码解析
前端·面试·github
@大迁世界8 小时前
Vue 设计模式 实战指南
前端·javascript·vue.js·设计模式·ecmascript
芭拉拉小魔仙8 小时前
Vue项目中如何实现表格选中数据的 Excel 导出
前端·vue.js·excel
jump_jump8 小时前
妙用 localeCompare 获取汉字拼音首字母
前端·javascript·浏览器
U.2 SSD9 小时前
Echarts单轴坐标系散点图
前端·javascript·echarts
德育处主任Pro9 小时前
前端玩转大模型,DeepSeek-R1 蒸馏 Llama 模型的 Bedrock 部署
前端·llama
Jedi Hongbin9 小时前
Three.js NodeMaterial 节点材质系统文档
前端·javascript·three.js·nodematerial