固体JSX中的动态标签名称

发布于 2025-02-03 05:26:05 字数 974 浏览 3 评论 0 原文

我想在SolidJ中动态设置JSX标签名称。我来自React 做得很简单：

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

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

但是当我尝试时要在SolidJ中做同样的事情，我会收到以下错误：

/* 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

我想知道我是否在这里错过了一些东西，或者是否有可能以其他任何方式以SolidJ来实现这一目标。

原文

I would like to set JSX tag names dynamically in SolidJS. I come from React where it is fairly simple to do:

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

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

but when I try to do the same thing in SolidJS, I get the following error:

/* 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

I would like to know if I miss something here, or whether it is possible to achieve this in SolidJS in any other way.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

水溶 2025-02-10 05:26:05

实心具有a ＆lt; dynamic＆gt; 用于此用途的助手组件。

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

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

Solid has a <Dynamic> helper component for that use.

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

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

回复收藏 0 原文

伴随着你 2025-02-10 05:26:05

例如字符串和节点）的替代实现

import { Component, JSXElement} from 'solid-js';
import { render,  } from 'solid-js/web';

const Dynamic: Component<{ tag: string, children: string | Node }> = (props) => {
  const el = document.createElement(props.tag);

  createEffect(() => {
    if(typeof props.children === 'string') {
      el.innerText = String(props.children);
    } else if (props.children instanceof Node){
      el.appendChild(props.children);
    } else {
      throw Error('Not implemented');
    }
  });

  return el;
};

const App = () => {
  return (
    <div>
      <Dynamic tag="h2">This is an H2!</Dynamic>
      <Dynamic tag="p">This is a paragraph!</Dynamic>
      <Dynamic tag="div"><div>Some div element rendering another div</div></Dynamic>
    </div>
  )
}

render(App, document.body);

这是涵盖简单案例（鉴于您无法控制内容。

当您需要从内容可编辑或文本方面渲染丰富的文本时，此替代方案很方便，其中包含 em ， strong 等标签。只需确保您使用 innerhtml 属性，而不是 innertext 。

Here is an alternative implementation covering simple cases like strings and nodes although you can extend it to cover any JSX element:

import { Component, JSXElement} from 'solid-js';
import { render,  } from 'solid-js/web';

const Dynamic: Component<{ tag: string, children: string | Node }> = (props) => {
  const el = document.createElement(props.tag);

  createEffect(() => {
    if(typeof props.children === 'string') {
      el.innerText = String(props.children);
    } else if (props.children instanceof Node){
      el.appendChild(props.children);
    } else {
      throw Error('Not implemented');
    }
  });

  return el;
};

const App = () => {
  return (
    <div>
      <Dynamic tag="h2">This is an H2!</Dynamic>
      <Dynamic tag="p">This is a paragraph!</Dynamic>
      <Dynamic tag="div"><div>Some div element rendering another div</div></Dynamic>
    </div>
  )
}

render(App, document.body);

This works because Solid components are compiled into native DOM elements, however since we do not escape the output, it is dangerous to render any children directly, given that you have no control over the content.

This alternative comes handy when you need to render rich text from a content editable or a textarea, text that includes tags like em, strong etc. Just make sure you use innerHTML attribute instead of innerText.