如何解决Blazor动态创建元素和appendChild
我想通过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。 Blazor的制造是为了使您不必操纵DOM。创建组件。以这种方式操作DOM会破坏Blazor的创建目的。您可能想从https://docs.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-3.1
开始一些基本知识 ,正如@Porkopek所提到的,这样做并没有什么充分的理由,因为它或多或少地破坏了使用Blazor动态呈现标记的目的。
如果绝对必须使用createElement
,则应将JS互操作代码绑定到window
对象以调用:
window.createDivElement = createElement(element,objectReference) {
const newDiv = document.createElement("div");
return element.appendChild(newDiv);
}
附带说明,DotNetObjectReference.Create(this)
用于通过[JSInvokable]
属性调用C#组件方法,在这里可能不需要。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。