为什么我的blazor组件带有ElementReference和IJSRuntime.循环内部的InvokeAsync不

Question

在blazor(服务器(组件的标记中，我试图在循环中添加的每个元素上调用一个javascript函数。这有点难以解释。。。希望这个代码片段能有所帮助：

@page "/"
@inject IJSRuntime JS
@for(var i = 0; i < 3; i++)
{
ElementReference div;
<div @ref="div">this should get replaced....</div>
JS.InvokeVoidAsync("Test", div, i); @* where Test is defined as: function Test(el, i) { el.innerHTML = i; }*@
}

如果我走错了路。。。什么是正确的方法？

对于更多的上下文，这就是我实际上试图做的事情：

@page "/"
@inject IJSRuntime JS
@foreach(var data in jsonItems)
{
ElementReference div;
<div @ref="div"></div>
JS.InvokeVoidAsync("JsonView.renderJSON", data, div); @* https://github.com/pgrabovets/json-view *@
}
@code
{
private readonly IEnumerable<string> jsonItems = new List<string> {"{}", "{}"};
}

如果有帮助的话，我已经创造了这个小提琴。。。https://blazorfiddle.com/s/428ov3ku

Answer 1

在ElementReference对象被分配到元素的引用之前，不能使用它。组件尚未创建和渲染，因此没有可用的ElementReference对象。您只能在组件渲染后使用ElementReference对象。

你可以这样做：

@inject IJSRuntime JSRuntime
@foreach (var div in divs)
{

<div @ref="div.ElementReference"></div>

}
@code
{
private readonly IEnumerable<Div> divs = new List<Div> { new Div{JSON="{1}" },
new Div{JSON="{2}"},
new Div{JSON="{3}"}};
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
@foreach (var div in divs)
{
await JSRuntime.InvokeVoidAsync(
"exampleJsFunctions.jsonRenderer", div.JSON, div.ElementReference);

}

}
}
public class Div
{
public ElementReference ElementReference { get; set; }
public string JSON { get; set; } 
}
}

将脚本放在_Host.cshtml文件的底部。。。

<script>
window.exampleJsFunctions = {
jsonRenderer: function (json, element) {
element.innerText = json;
}
}
</script>