主页 / coding / 问题 / 79492949
Accepted
AlexAngc
Asked: 2025-03-08 00:43:25 +0800 CST

将组件继承语法转换为 Svelte 5 函数组件

  • 772

我正在将我的代码库从 Svelte 4 迁移到 Svelte 5。

我有以下代码：

import MarkdownLinkRenderer from '$lib/MarkdownLinkRenderer.svelte';

export function createMarkdownLinkRenderer(styles: string) {
  return class extends MarkdownLinkRenderer {
    constructor(options: { target: Element; props: { href: string; text: string } }) {
      super(options);
      this.$set({ className: styles });
    }
  };
}

它被用作svelte-markdown软件包的渲染器（@humanspeak/svelte-markdown为了与 Svelte 5 兼容而被替换）：

<script lang="ts">
  const renderers = {
    link: createMarkdownLinkRenderer('text-blue-56 hover:underline')
  };
</script>

<Markdown source={notification.message} options={{ gfm: true, breaks: true }} {renderers} />

createMarkdownLinkRenderer由于组件不再是类，我该如何转换它以与 Svelte 5 配合使用？

svelte

1 个回答

  1. Best Answer

    我不确定是否有一个真正干净的解决方案。一种方法是依赖组件的内部函数结构。由于这是一个实现细节，因此无法保证结构会保持这种状态。

    组件函数目前接受两个参数，第一个是渲染组件的节点，第二个是 props 集合。你可以直接将你的样式属性加入到这些中：

    export function createMarkdownLinkRenderer(styles: string) {
    return (anchor, props, ...rest) => {
        const joinedProps = { ...props, className: styles };
        return MarkdownLinkRenderer(anchor, joinedProps, ...rest);
    };
}

    游乐场示例

    • 1

相关问题