使用 SolidJS 导入和渲染 html 元素
发布于2023-02-03 03:30 阅读(502) 评论(0) 点赞(24) 收藏(5)
当我的应用程序加载时，它会调用后端来获取用户决定添加的组件的描述。
这些对象应该有一个函数来生成它们的 html，以一个按钮为例：它会导出一个 html() 方法，该方法返回一个包含 HTML 文本的字符串：
const buttonText = "I'm a button"
export default {
html() {
return `<button>${buttonText}</button>`
}
}
在前端，我将使用 import 语句加载上述按钮模块并将其存储在 JSON 对象中，有点像插件管理器。
到了渲染它的时候，我尝试使用 Dynamic：
<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 字符串的正确方法是什么？
解决方案
一个简单的解决方案就是innerHTML像这样使用：
<For each={plugins()} fallback={<p>Loading...</p>}>
{ plugin =>
<div innerHTML={plugin.module.html()}>
<div>
}</For>
如果您需要更具交互性的东西，也许使用templateSolidjscloneNode通常将您的代码编译成什么。下面是一个完整的例子。我在操场上创造了它。
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, 2);
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"));
所属网站分类: 技术文章 > 问答
作者：黑洞官方问答小能手
链接：http://www.qianduanheidong.com/blog/article/497284/031cf9867bda628b7c91/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力