JSX 中的自定义渲染函数 - 如何处理片段

Question

我正在尝试使用 JSX 本身（没有 React）来呈现一些动态内容，并带有一个自定义的 createElement 函数。我正在使用具有以下设置的 webpack：{ "pragma": "createElement", "pragmaFrag": "'fragment'" } for @babel/plugin-transform-react-jsx。

这是我的自定义渲染器代码：

function createElement(tagName, attrs = {}, ...children) {
    let el = document.createElement(tagName);

    if (attrs) {
        for (let [ key, val ] of Object.entries(attrs)) {
            if (key === 'className') {
                el.className = val;
            } else {
                el.setAttribute(key, val);
            }
        }
    }

    for (let child of children) {
        if (Array.isArray(child)) el.append(...child);
        else el.append(child);
    }

    return el;
}

我很好奇如何在这个函数中处理片段元素 (<>content</>)。通过谷歌搜索，我发现人们添加了以下内容：

function createElement() {
  // ...
  if (tagName === 'fragment') return children;
  // ...
  return el;
}

但这只是返回字符串"[object HTMLLIElement]"，这对我来说是因为createElement似乎必须返回一个节点元素，而不是NodeList或某种数组。

有没有办法在我的 createElement 函数中轻松实现片段？谢谢

编辑：

使用下面 T.J. 的回答，我能够通过添加以下行来解决问题，以利用 DocumentFragment：

    let el = tagName === 'fragment' ? new DocumentFragment() : document.createElement(tagName);

Answer 1

这在很大程度上取决于您如何处理它，因为您还（可能）编写了使用您的 createElement 返回的代码（例如，将这些东西放入 DOM - 相当于 ReactDOM.render 或类似的） .您可以返回一个数组、document fragment 或您自己的自定义容器。不管是什么，你的代码需要这些并将它们放入 DOM 中，只需要检查它并适当地处理它。

我应该注意createElement 通常不会直接创建 DOM 元素。它创建的对象（通常）具有创建元素的信息，但不是实际元素。原因之一是您并不总是将这些对象转换为 DOM 元素。如果您正在更新而不是安装，您通常会根据对象中的更新信息更新现有的 DOM 元素。当然，你可以做不同的事情，这里没有“错误”。 :-) 我提到它是因为知道这可能会帮助您解决片段问题。