如何获取自定义 Blazor 组件的特定实例

Question

来自 asp.net webforms 我总是有些怀疑如何在 Blazor 中实现某些任务，没有引用控件或组件的唯一 ID。

假设我有一个名为 MyCard（一个简单的引导卡）的自定义组件，它公开了一个 Visible 属性

<div class="card mb-3 @display" style="width: 18rem;">
    <div class="card-body">
        @ChildContent
    </div>
</div>


@code {
    string display = "";

    [Parameter]
    public RenderFragment ChildContent { get; set; }

    private bool _visible = true;
    [Parameter]
    public bool Visible
    {
        get
        {
            return _visible;
        }
        set
        {
            _visible = value;
            display = value ? "" : "d-none";
        }
    }

}

然后我在一页上使用多个

@page "/"

<h1>Hello, world!</h1>

<MyCard Visible="@hidetoggles[0]">First Card</MyCard>

<MyCard Visible="@hidetoggles[1]">Second Card</MyCard>

<MyCard Visible="@hidetoggles[2]">Third Card</MyCard>

<button @onclick="Hide">Hide the 2nd card</button>

@code
{
    bool[] hidetoggles = new bool[] { true, true, true };

    void Hide()
    {
        hidetoggles[1] = false;
    }
}

有没有更优雅的方法来设置特定实例（例如第二个）的属性而不是我所做的？

MyCard 中的 ID 属性有用吗？

谢谢

Answer 1

引用Capture 对组件文档的引用：

组件引用提供了一种引用组件实例的方法，以便您可以向该实例发出命令，例如Show或Reset。要捕获组件引用：

• @ref为子组件添加一个属性。
• 定义一个与子组件类型相同的字段。

对于您的代码：

MyCard.razor：

<div class="card mb-3 @display" style="width: 18rem;">
    <div class="card-body">
        @ChildContent
    </div>
</div>
    
@code {
    string display = "";

    [Parameter]
    public RenderFragment ChildContent { get; set; }

    public void setVisible(bool visible)
    {
        if(visible)
        {
            display = "";
        }
        else
        {
            display = "d-none";
        }
    }
}

Index.razor：

<MyCard @ref="MyCardControl1">First Card</MyCard>
<button @onclick="Hide">Hide card</button>
@code{

    MyCard MyCardControl1;

    private void Hide()
    {
        MyCardControl1.setVisible(false);
    }
}   

更多信息见 Blazor 绑定、事件和参数。