在 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 元素。 當然，你可以做不同的事情，這里沒有“錯誤”。 :-) 我提到它是因為知道這可能會幫助您解決片段問題。