Blazor 动态地 createElement 和 appendChild答案

【问题标题】：Blazor dynamically createElement and appendChildBlazor 动态地 createElement 和 appendChild
【发布时间】：2020-10-27 07:35:23
【问题描述】：

我想通过 Blazor Webassembly 中的 JSInterop 动态创建 DIV 容器。我的方法是在 C# 中创建一个 CreateElement 方法，该方法在 javascript 中调用 createElement 并返回一个 ElementReference 作为结果。但是当我运行以下代码时，我只得到一个空对象。

C#代码：

public object CreateElement(ElementReference elementReference)
{
    return JsRuntime.Invoke<object>("createElement",
        elementReference,
        DotNetObjectReference.Create(this));
}

Javascript 代码：

createElement(element, objectReference) {
            const newDiv = document.createElement("div");
            return element.appendChild(newDiv);
        }

【问题讨论】：

你有充分的理由在 JS 中这样做吗？而不是 C#？

标签： dynamic blazor blazor-webassembly blazor-jsinterop

【解决方案1】：

你不需要 JS。 Blazor 是为了让您不必操作 DOM。创建组件。以这种方式操作 DOM 违背了制作 Blazor 的目的。你可能想从https://docs.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-3.1开始一些基础知识

【讨论】：

【解决方案2】：

正如@Porkopek 所提到的，这样做并不是一个很好的理由，因为它或多或少地违背了使用 Blazor 动态呈现标记的目的。

如果你绝对必须使用createElement，你应该将你的JS互操作代码绑定到window对象来调用：

window.createDivElement = createElement(element, objectReference) {
  const newDiv = document.createElement("div");
  return element.appendChild(newDiv);
}

旁注，DotNetObjectReference.Create(this) 用于通过 [JSInvokable] 属性回调 C# 组件方法，此处可能不需要。

【讨论】：