Blazor动态创建Element和appendChild

Question

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

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://learn.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#组件方法，这里可能不需要。