时间戳

首页 > 解决方案 > 如何在 Blazor 中保留组件实例

c# - 如何在 Blazor 中保留组件实例

问题描述

我有一个类似的组件，我希望保存InnerComponent第一次渲染的实例，并且每次都渲染相同的实例而不重新实例化它。

@if(isVisible)
{
    <InnerComponent @ref="@_InnerComponent" @key="@("InnerComponentKey")">
        @ChildContent
    </InnerComponent>
}

@code{
    [Parameter] public InnerComponent _InnerComponent { get; set; }
    private bool IsVisible { get; set; }
}

当内部组件可见时，用户可以操纵其状态。但是如果IsVisible设置为 false 然后再次设置为 true，则内部组件将被重新渲染覆盖_InnerComponent，因此我们会丢失用户对该InnerComponent实例所做的更改的跟踪。

添加 @key 似乎也无助于保留实例。它只是被重新渲染和覆盖：/我敢肯定，我在两次渲染时都给它提供了相同的密钥，但我不知道如何检查它所比较的​​密钥。

如果可以呈现组件实例，我可以执行以下操作，但我似乎无法找到这样做的方法。

@if(isVisible)
{
    @if(_InnerComponent == null)
    {
        <InnerComponent @ref="@_InnerComponent" @key="@("InnerComponentKey")">
            @ChildContent
        </InnerComponent>
    }
    else
    {
        @_InnerComponent.Render()
    }
}

我正在对我的问题提出批评，因为我没有问很多:)

提前致谢！

简化示例：

假设我们有以下组件，我将调用 `CounterContainer` ，其中 `<Counter>` 是默认 Blazor 项目模板中的计数器组件。 
@if(CounterIsVisible)
{
    <Counter @ref="@_Counter" @key="@("CounterKey")" />
}

<button @onclick="() => CounterIsVisible = !CounterIsVisible">
    Show/Hide counter 
</button>

@code{
    [Parameter] public Counter _Counter { get; set; }
    private bool CounterIsVisible { get; set; } = true;
}

我想保存_Counter实例，这样我就可以看到_Counter.currentCount我数到的正确值。我可以使用本文中的方法保存它，但我发现它们都不实用，因为

我已经Counter存储了参考。我只想查看它而不是重新实例化它并覆盖整个内容。

希望这让它更清楚一点（：

标签： c#asp.net-coreblazor

解决方案

  • 最佳选择：单独的视图和数据。您要保留的状态不应保存在组件内，而应保存在单独的 (ViewModel) 对象中。

  • 简短的解决方案：始终渲染组件。使用 @isVisible 打开/关闭 css 类以隐藏它。

推荐阅读