在 JSX 中自定义渲染 function - 如何处理片段

Question

我正在尝试使用 JSX 本身（没有 React）来呈现一些动态内容，并使用自定义 createElement function。 我将 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;
}

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

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

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

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

编辑：

使用下面 TJ 的回答，我可以通过添加以下行来使用DocumentFragment来解决问题：

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

Answer 1

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

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