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>

相关推荐
jiangzhihao05153 小时前
前端自动翻译插件webpack-auto-i18n-plugin的使用
前端·webpack·node.js
软件技术NINI5 小时前
html css网页制作成品——HTML+CSS盐津铺子网页设计(5页)附源码
前端·css·html
mapbar_front6 小时前
面试问题—我的问题问完了,你还有什么想问我的吗?
前端·面试
quweiie6 小时前
thinkphp8+layui多图上传,带删除\排序功能
前端·javascript·layui
李鸿耀6 小时前
React 项目 SVG 图标太难管?用这套自动化方案一键搞定!
前端
闲蛋小超人笑嘻嘻6 小时前
树形结构渲染 + 选择(Vue3 + ElementPlus)
前端·javascript·vue.js
叶梅树7 小时前
从零构建A股量化交易工具:基于Qlib的全栈系统指南
前端·后端·算法
巴博尔7 小时前
uniapp的IOS中首次进入,无网络问题
前端·javascript·ios·uni-app
Asthenia04127 小时前
技术复盘:从一次UAT环境CORS故障看配置冗余的危害与最佳实践
前端
csj507 小时前
前端基础之《React(1)—webpack简介》
前端·react