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

Question

如果某个元素在第一次渲染时隐藏（例如，该元素在 if 语句范围内，该范围被评估为 false，因此不会被渲染），并且某些事件使其出现（if 语句评估为 true ) 内部元素引用在渲染后得到更新。这绝对没问题。

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

问题是如何判断元素是否可见（呈现、存在）？

Answer 1

Blazor 不会破坏 ElementReference 对象。它被保留以供进一步使用。但它总是充满新数据；那就是被反抗的 ElementReference 对象获得了一个新的 id。因此，您始终可以比较 id

的两个连续值

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

elementRef = default(ElementReference);

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

并且您可以像这样检查是否存在元素引用；

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

    }
}

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

How can I tell if an element reference does exist in blazor

c#

blazor

blazor-webassembly