svelte5中使用react组件

在svelet5中导入并使用react组件库

• svelte5中使用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

目前此部分适配器有问题, children无法获取并且在react组件中渲染

参考：
props-and-restProps
issues

5. 添加react组件库, 如 ant design

   $ pnpm add antd

   +page.svelte

   Hello, World!