svelte - 如何验证传递的道具是否是 Svelte 中的组件类型？

Question

我有一个需要 afunction或Component. 所以我想通过检查道具的类型来区分它是组件还是函数。我目前正在使用以下一个。当代码被混淆时，这可能在 prod 中不起作用。想知道更好的解决方案吗？

let isSvelteComponent = component => {
    return (
      typeof component !== "undefined" &&
      component.__proto__.name === "SvelteComponentDev"
    );
  };

Answer 1

我认为，宽泛地说，任何函数都可能是有效的 Svelte 组件：

<script>
    import B from './B.svelte'

    const C = function(opts) {
        return new B(opts)
    }
</script>

<B />   

<C />

REPL

因此，实际上并没有一种完全可靠的方法可以将 Svelte 组件与常规函数区分开来。

在您的情况下，如果 Svelte 组件和函数具有不同的含义并且应该以不同的方式处理，也许它们应该通过不同的道具传递？这将允许确定什么是什么，以及它的用途。

Answer 2

我可以通过检查原型来解决这个问题，如下所示

import { SvelteComponent } from "svelte";
let isSvelteComponent = component => {
   return SvelteComponent.isPrototypeOf(component);
};