是否可以在运行时附加 JSX？

Question

我有一个模板组件需要将一个子节点附加到开槽节点。目前我是这样做的：

const x = document.createElemet('x');
slotted.appendChild(x);

但我想做这样的事情：

const xJsx = (<x></x>);
slotted.appendChild(xJsx);

后者不起作用，因为 appendChild 需要一个节点、HTMLElement 或 DocumentFragement，但是有没有办法转换 JSX 并在运行时使用模板附加它？

Answer 1

通常不可以

详细说明：

JSX只是一种语法，它只在你在编辑器写代码的时候存在，它帮助你写出这种易于人类理解的特定语言，后来可以翻译成javascript和html 标签。

当你说运行时，你指的是浏览器的javascript运行时，浏览器的JS引擎不知道什么是JSX。结果它不起作用。

现在这就是 babel 的作用：它将您的 JSX 语法代码翻译成浏览器支持的 javascript。它发生在构建时。（你预先构建它）

我说“Genrally”的原因是，没有人会阻止人们尝试使用 babel 来转换 JSX...但是我个人不会推荐它，因为它非常低效并且需要大量工作才能拥有它工作

Is it possible to append JSX at runtime?