时间戳

首页 > 解决方案 > 何获取自定义 Blazor 组件的特定实例

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

问题描述

来自 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 属性有用吗？

标签： blazor

解决方案

引用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";
        }
    }
}

索引剃刀：

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

    MyCard MyCardControl1;

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

有关Blazor 绑定、事件和参数的更多信息。

推荐阅读