solid-js - Solid JSX 中的动态标签名称

标签 solid-js

我想在 SolidJS 中动态设置 JSX 标签名称。我来自 React it is fairly simple to do :

/* 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 中实现这一点。

最佳答案

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

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

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

关于solid-js - Solid JSX 中的动态标签名称,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/72443438/

相关文章:

javascript - 如何向同一个 HTML 元素上的 Solid.js 组件添加多个事件处理程序?

typescript - 相当于 React.HTMLProps<...> 的 Solid JS

javascript - SolidJS 中的条件样式

reactjs - 使用 ViteJS React/SolidJS 检测 HMR 事件

typescript - 使用 SolidJS 中的 fetch API 渲染远程数据

javascript - solid-js中如何只监听某个对象的某个值?

javascript - SolidJS - 如何使用外部依赖触发 createEffect?

solid-js - 在 SolidJS 中,如何做后备路由?

solid-js - Solid JS 是否有 React.useCallback 的等价物?

typescript - 使用 :___ throw errors for typescript in JSX 的 SolidJS 指令