Blazor:ElementReference不存在子组件

我需要将ElementReference传递给Blazor组件的子组件以实现互操作。但是当我这样做时，子组件的互操作只有在父组件的互操作成功执行之后才起作用。我猜引用没有呈现，但这对我来说没有任何意义，因为我一直在渲染后执行的代码中使用ElementReference

家长：

@page "/"
@inject IJSRuntime JsRuntime

<h1>Hello, world!</h1>

Welcome to your new app.
<p @ref="ExampleRef">Test:</p>

<ChildComponent Reference="ExampleRef"/>
<button @onclick="HandleClick">Click 2</button>

@code
{
    public ElementReference ExampleRef;

    public void HandleClick(MouseEventArgs mouseEventArgs) => ((JSInProcessRuntime)JsRuntime).InvokeVoid("foo", ExampleRef, "Parent Clicked! ");
}

完整源代码位于： （注：这是一种带有多个分支机构的回购协议，用于显示问题。）

背景： 我需要得到HTML元素相对于browserwindow的位置，以及div元素的中心点

ElementReference实例仅在定义它们的组件呈现后才有效。如果您将它们传递给子组件，我相信不能保证它们能正常工作，就像Blazor组件独立渲染一样（父级重新渲染并不意味着子级重新渲染），因此您无法从子组件知道引用是否正确

为了实现您的场景，只需在父组件的OnAfterRenderAsync方法内执行JS互操作调用就更有意义了

ElementReference实例仅在定义它们的组件呈现后才有效。如果您将它们传递给子组件，我相信不能保证它们能正常工作，就像Blazor组件独立渲染一样（父级重新渲染并不意味着子级重新渲染），因此您无法从子组件知道引用是否正确

为了实现您的场景，只需在父组件的OnAfterRenderAsync方法内执行JS互操作调用就更有意义了

<button @onclick="HandleClick">Click</button>

@inject IJSRuntime JsRuntime
@code {
    [Parameter]
    public ElementReference Reference { get; set; }

    protected override void OnAfterRender(bool firstRender)
    {
        base.OnAfterRender(firstRender);
        if(firstRender)
            SingeltonFoo.Instance.SomethingHappened += HandleSomethingHappened;

    }
    public void HandleSomethingHappened(string foo) => ((JSInProcessRuntime)JsRuntime).InvokeVoid("foo", Reference, foo);
    public void HandleClick(MouseEventArgs mouseEventArgs) => SingeltonFoo.Instance.OnSomethingHappend("Child Clicked! ");
}

window.foo = (ele, foo) => {
    console.log(ele);
    ele.innerHTML = ele.innerHTML + foo;
}