Blazor: ElementReference not present ChildComponent

Question

我需要将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! ");
}

儿童：

<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(注意：这是一个带有多个分支的回购，用于显示问题。(

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

Answer 1

ElementReference实例只有在定义它们的组件被渲染后才有效。如果你把它们传给子组件，我相信不能保证它们会正确工作，就像Blazor组件独立渲染一样(父组件重新渲染并不意味着子组件重新渲染(，所以你不能从子组件知道引用是否正确。

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