reactjs 如何在solid.js项目中使用web组件?

50few1ms  于 2023-02-12  发布在  React
关注(0)|答案(2)|浏览(162)

当我尝试在Solid.js项目中使用Web组件(而不是构建一个)时,它无法识别标记,因为它不是一个内在元素。我如何设置solid.js来识别Web组件?

brgchamk

brgchamk1#

这就是你如何扩展全局类型,以摆脱TS错误:

import type { ComponentProps } from "solid-js"

declare module "solid-js" {
  namespace JSX {
    interface IntrinsicElements {
      "aero-modal": ComponentProps<"div"> & { foo: number }
    }
  }
}

我不知道如何让自定义元素本身工作......但我会假设他们已经这样做了。他们毕竟是自定义元素,固体不判断。如果在JSX中的标记是小写的,它应该把它当作一个html元素。
注:我在这里放的ComponentProps<"div"> & { foo: number }是 prop ,如果组件没有 prop ,你可以放一个{}

2uluyalo

2uluyalo2#

如果要扩展HTMLElement,更通用的解决方案可能是

declare module 'solid-js' {
  namespace JSX {
    type ElementProps<T> = {
      // Add both the element's prefixed properties and the attributes
      [K in keyof T]: Props<T[K]> & HTMLAttributes<T[K]>;
    }
    // Prefixes all properties with `prop:` to match Solid's property setting syntax
    type Props<T> = {
      [K in keyof T as `prop:${string & K}`]?: T[K];
    }
    interface IntrinsicElements extends ElementProps<HTMLElementTagNameMap> {
    }
  }
}

来自Solid github上的一期。

相关问题