使用 SolidJS 动态导入和渲染 html答案

【问题标题】：Import and render an html element with SolidJS使用 SolidJS 动态导入和渲染 html
【发布时间】：2022-10-23 15:15:01
【问题描述】：

我对 SolidJS 还很陌生，我正在尝试动态加载组件，但在网上找不到确切的解决方案。我发现唯一接近的是：https://codesandbox.io/s/solid-switcher-qhmsn?file=/index.js:184-22 但函数不是动态加载的。

当我的应用程序加载时，它会调用后端来获取用户决定添加哪些组件的描述——因此它需要是动态的。

这些组件应该有一个生成它们的 html 的函数，以一个按钮为例：它将导出一个 html() 函数，该函数返回一个包含其 HTML 的字符串：

const buttonText = "I'm a button"
export default {
  html() {
    return `<button>${buttonText}</button>`
  }
}

在前端，我将使用 import() 加载上述按钮模块并将其存储在 JSON 对象中，有点像插件管理器。

当需要渲染它时，我尝试使用动态：

<For each={plugins()} fallback={<p>Loading...</p>}>{ plugin =>
  <div>
    <Dynamic component={plugin.module.html()}>
    </Dynamic>
  <div>
}</For>

但它因DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('<button>I'm a button</button>') is not a valid name. 而失败了

这是有道理的，它期待像"div" 而不是<button>I'm a button</button>。

让SolidJS导入和显示生成html的外部函数的正确方法是什么？

【问题讨论】：

标签： javascript html dynamic solid-js

【解决方案1】：

一个简单的解决方案就是像这样使用innerHTML：

<For each={plugins()} fallback={<p>Loading...</p>}>
{ plugin =>
 <div innerHTML={plugin.module.html()}>
 <div>
}</For>

如果您需要更具交互性的东西，或许可以使用 template 和 cloneNode，这就是 Solidjs 将您的代码正常编译的内容。下面是一个完整的例子。 I created it on the playground。

import { render, template } from "solid-js/web";
import { For } from "solid-js";

function MakeButton() {
  const plugins = ["<button>Click me</button>"];

  const handleClick = () => {
    console.log("Clicked button");
  }

  const createElem = (el: string) => {
    const elem = template(el);
    const ret = elem.cloneNode(true);
    if (ret.tagName === "BUTTON") {
      ret.onclick = handleClick;
    }
    return ret;
  }

  return (<>
    <For each={plugins} fallback={<div>Loading...</div>}>
      {plugin =>
        <div>{createElem(plugin)}</div>
      }
    </For>
  </>);
}

render(() => <MakeButton />, document.getElementById("app"));

【讨论】：