百度添加网站,分析一个网站,传统企业营销型网站建设,h5的网站在svelet5中导入并使用react组件库 svelte5中使用react组件 svelte5中使用react组件
在svelet5中导入并使用react组件库, 示例项目地址#xff1a;https://github.com/shenshouer/my-svelte-react
在svelte5中当前还有问题#xff0c;无法将children传递到react中渲染
使用… 在svelet5中导入并使用react组件库 svelte5中使用react组件 svelte5中使用react组件
在svelet5中导入并使用react组件库, 示例项目地址https://github.com/shenshouer/my-svelte-react
在svelte5中当前还有问题无法将children传递到react中渲染
使用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 │
│ │
├──────────────────────────────────────────────────────────────────────────╯
│
└ Youre all set!$ cd my-svelte-react$ pnpm install$ pnpm dev
安装react相关依赖
$ pnpm i react react-dom
$ pnpm i --save-dev types/react types/react-dom
$ pnpm add vitejs/plugin-react -D
修改vite.config.ts增加react支持
import { sveltekit } from sveltejs/kit/vite;
import { defineConfig } from vite;
import react from vitejs/plugin-react; # ---- hereexport default defineConfig({plugins: [sveltekit(), react()] # ---- here
});创建react svelte适配器ReactAdapter.svelte, 代码如下:
# src/lib/utils/ReactAdapter.sveltescript langtsimport 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 });}});
/scriptdiv bind:this{container} class{$$props.class}/div
目前此部分适配器有问题, children无法获取并且在react组件中渲染 参考 props-and-restProps issues 添加react组件库, 如 ant design
$ pnpm add antd# page.sveltescript langtsimport { Button } from antd;import ReactAdapter from $lib/utils/ReactAdapter.svelte;
/scriptReactAdapter el{Button} typeprimaryHello, World!/ReactAdapter
