Blazor 通过传递DynamicElementRef调用JS函数

如何传递在OnAfterRenderAsync中动态创建的html元素控件？我的场景是，我将为下面的控件创建一个foreach循环，该循环具有唯一的ID。我需要调用一个JS函数，绕过它们的引用。所有文档引用都在谈论静态声明它们。谢谢你的帮助

<div id="dragdiv" @ref="dragdiv" class="dragdiv">
    <div id="mydivheader" class="dragdivheader">Click here to move</div>
</div>

@code {

    private ElementReference dragdiv;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {

          if (firstRender)
            {
                await JSRuntime.InvokeVoidAsync(
                    "dragElement", dragdiv);
            }

    }

}

---

你可以用多种方式来做。这里有一个：

定义div元素所在的组件 定义一个名为ID的参数属性来存储引用div的ID。此值从实例化组件的位置传递。 注入IJSRuntime以执行JSInterop调用。 定义ElementReference变量 创建一个名为ClickMe的测试方法 动力剃须刀 创建一个在单击div时调用的JS方法。将此脚本放在_Host.cshtml文件的底部，就在下面

window.exampleJsFunctions= { dragElement：功能元素{ //元素； window.alertelement.id； } };

用法

---

你可以用多种方式来做。这里有一个：

定义div元素所在的组件 定义一个名为ID的参数属性来存储引用div的ID。此值从实例化组件的位置传递。 注入IJSRuntime以执行JSInterop调用。 定义ElementReference变量 创建一个名为ClickMe的测试方法 动力剃须刀 创建一个在单击div时调用的JS方法。将此脚本放在_Host.cshtml文件的底部，就在下面

window.exampleJsFunctions= { dragElement：功能元素{ //元素； window.alertelement.id； } };

用法

<div id="@ID" @ref="dragdiv" class="dragdiv">
    <div id="mydivheader" class="dragdivheader" @onclick="ClickMe">Click here to move</div>
</div>

@code {

    [Parameter]
    public string ID { get; set; }

    [Inject]
    public IJSRuntime JSRuntime { get; set; }
    private ElementReference dragdiv;

    private void ClickMe ()
    {
        JSRuntime.InvokeVoidAsync(
                "exampleJsFunctions.dragElement", dragdiv);
    }
}

@for (var i = 0; i < 10; i++)
{
    var id = "dragDiv" + i.ToString();

    <DynamicDiv ID="@id"></DynamicDiv>
}