Blazor：ElementReference 不存在 ChildComponent

Question

我需要将 ElementReference 传递给 Blazor 组件的 child 组件以进行互操作。但是，当我这样做时，child 组件的互操作仅在 parent 组件的互操作成功执行后才起作用。我猜 Reference 不是 presend，但这对我来说没有任何意义，因为我总是在渲染后执行的代码中使用 ElementReference。

Parent:

@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! ");
}

Child:

<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! ");
}

Intop 代码：

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

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

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

Answer 1

ElementReference instances are only valid after the component in which they are defined has been rendered. If you pass them down to child component I believe there's no guarantee they'll work correctly, as in Blazor components render independently (A parent re-rendering doesn't mean a child re-renders) so you can't know from the child component whether the reference is correct or not.

To achieve your scenario, it would make more sense to simply perform a JS Interop call inside the OnAfterRenderAsync method of the parent component

Blazor：ElementReference 不存在 ChildComponent

Blazor: ElementReference not present ChildComponent

blazor

nullreferenceexception

blazor-webassembly

blazor-jsinterop