Blazor：ElementReference 不存在 ChildComponent答案

【问题标题】：Blazor: ElementReference not present ChildComponentBlazor：ElementReference 不存在 ChildComponent
【发布时间】：2021-03-03 19:35:56
【问题描述】：

我需要将 ElementReference 传递给 Blazor 组件的子组件以进行互操作。但是当我这样做时，子组件的互操作仅在父组件的互操作成功执行后才起作用。我想 Reference 不是 presend，但这对我来说没有任何意义，因为我一直在渲染后执行的代码中使用 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! ");
}

孩子：

<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;
}

完整源代码位于： https://github.com/niklasweimann/BlazorDebugging/tree/elementReferene-null/BlazorDebugging （注意：它是一个带有多个分支的 repo，用于显示问题。）

背景：我需要获取 HTML 元素相对于浏览器窗口的位置，并且需要获取 div 元素的中心点。

【问题讨论】：

标签： blazor nullreferenceexception blazor-webassembly blazor-jsinterop

【解决方案1】：

ElementReference 实例仅在定义它们的组件被渲染后才有效。如果您将它们传递给子组件，我相信无法保证它们会正常工作，因为在 Blazor 组件中独立渲染（父重新渲染并不意味着子重新渲染）所以您无法从孩子那里知道组件是否引用正确。

为了实现您的方案，在父组件的 OnAfterRenderAsync 方法中简单地执行 JS 互操作调用会更有意义

【讨论】：