如何判断 blazor 中是否存在元素引用

Question

如果一个元素在第一次渲染中隐藏（例如，该元素在一个 if 语句范围内，它被评估为 false，所以不会被渲染），并且某些事件使它出现（if 语句评估为 true）内部元素引用渲染后更新。 这工作得很好。

但是如果相反的事件流（首先是真的，而不是被某些事件隐藏），元素引用在渲染后不会更新，仍然显示原始 id 而不是 null 或空字符串。 在这种情况下，如果我使用该元素引用调用 JsInterop，它将给出元素不存在的错误（这显然是正确的）。 问题是元素引用仍然具有以前的 id，它在渲染后没有改变。

问题是如何判断一个元素是否可见（渲染、存在）？

Answer 1

Blazor 不会破坏 ElementReference 对象。 它被持久化以供进一步使用。 但它总是充满新数据； 那就是insurrected ElementReference 对象获得一个新的id。 因此，您始终可以比较 id 的两个连续值

您可以将元素引用设置为其默认值：

elementRef = default(ElementReference);

这相当于将引用对象设置为 null。

你可以检查天气元素引用确实存在这样的;

if (EqualityComparer<ElementReference>.Default.Equals(elementRef, 
                                             default(ElementReference)))
 {
     // Does not exist...      
 }
 

玩这个代码，看看你说的都是错的，除非我没听懂。

@page "/"


@if (display)
{
    <div @ref="elementRef">Welcome to your new app.</div>
}

<button @onclick="@(() => display = !display )">Toggle</button>
<button @onclick="ConsoleWrite">Console</button>
@code{ 
    private bool display = true;
    ElementReference elementRef;

    private void ConsoleWrite()
    {
               
        Console.WriteLine(elementRef.Id);

        if (!EqualityComparer<ElementReference>.Default.Equals(elementRef, default(ElementReference)))
        {
            Console.WriteLine("return false");
        }

        // Set the element reference to its default value
        elementRef = default(ElementReference);

        if (EqualityComparer<ElementReference>.Default.Equals(elementRef, default(ElementReference)))
        {
            Console.WriteLine("Return true after being set to its default value");
        }

        Console.WriteLine("elementRef.Id is null now" + elementRef.Id);

    }
}