Solid JSX 中的动态标签名称

Question

我想在 SolidJS 中动态设置 JSX 标签名称。我来自 React，那里做起来相当简单：

\n

/* Working ReactJS Code: */\nexport default MyWrapper = ({ children, ..attributes }) => {\n  const Element = "div";\n\n  return (\n    <Element {...attributes}>\n      {children}\n    </Element>\n  )\n}\n

\n

但是当我尝试在 SolidJS 中执行相同的操作时，出现以下错误：

\n

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

\n

我想知道我是否错过了这里的某些内容，或者是否可以通过任何其他方式在 SolidJS 中实现这一点。

\n

Answer 1

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

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

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