Solid JSX 中的动态标签名称

Question

我想在 SolidJS 中动态设置 JSX 标签名称。我来自 :

的 React

/* Working ReactJS Code: */
export default MyWrapper = ({ children, ..attributes }) => {
  const Element = "div";

  return (
    <Element {...attributes}>
      {children}
    </Element>
  )
}

但是当我尝试在 SolidJS 中做同样的事情时，出现以下错误：

/* Console output when trying to do the same in SolidJS: */
dev.js:530 Uncaught (in promise) TypeError: Comp is not a function
  at dev.js:530:12
  at untrack (dev.js:436:12)
  at Object.fn (dev.js:526:37)
  at runComputation (dev.js:706:22)
  at updateComputation (dev.js:691:3)
  at devComponent (dev.js:537:3)
  at createComponent (dev.js:1236:10)
  at get children [as children] (Input.jsx:38:5)
  at _Hot$$Label (Input.jsx:7:24)
  at @solid-refresh:10:42

我想知道我是否遗漏了什么，或者是否可以通过任何其他方式在 SolidJS 中实现这一点。

Answer 1

Solid 有一个 <Dynamic> 辅助组件用于该用途。

import {Dynamic} from "solid-js/web";

<Dynamic component="div" {...attributes}>
   {props.children}
</Dynamic>

Solid JSX 中的动态标签名称

Dynamic tag name in Solid JSX

solid-js