dynamic - Blazor 动态地 createElement 和 appendChild

Question

我想通过 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);
        }

score 1 · Accepted Answer

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

score 0 · Accepted Answer

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

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

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

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

dynamic - Blazor 动态地 createElement 和 appendChild

2 回答 2

Related

Reference