Blazor 动态 createElement 和 appendChild

Question

我想通过 Blazor Webassembly 中的 JSInterop 动态创建 DIV 容器。我的方法是在 C# 中创建一个 CreateElement 方法，它在 javascript 和 returns 中调用 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);
        }

Answer 1

你不需要 JS。 Blazor 的创建使您不必操纵 DOM。创建组件。以这种方式操纵 DOM 违背了创建 Blazor 的初衷。您可能想从 https://docs.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-3.1

的一些基础知识开始

Answer 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# 组件方法，此处可能不需要。

Blazor 动态 createElement 和 appendChild

Blazor dynamically createElement and appendChild

dynamic

blazor

blazor-webassembly

blazor-jsinterop