Blazor 修改 CaptureUnmatchedValues 已有属性不重新渲染

Question

.NET 5 上的 Blazor WebAssembly。

在组件中，我正在捕获用户可能添加的附加属性。

[Parameter(CaptureUnmatchedValues = true)]
public Dictionary<string, object> AdditionalAttributes { get; set; }

<li @onclick="TabSelected" @attributes="AdditionalAttributes">
@ChildContent
</li>

在 TabSelected 事件中，我正在检查是否添加了 CSS class，如果没有，我添加它并给它一个值 active，如果它被添加，我只是将 active 附加到键 class 的现有字典中。之后我也打StateHasChanged()

AdditionalAttributes操作正确

但是，如果 class 不存在并且我添加了它并赋予了它一个值，那么它会按预期重新呈现。但是如果 class 已经存在并且我刚刚附加了 active，则不会重新呈现！

如何强制重新渲染修改后的值？

Answer 1

您可以从 AdditionalAttributes 集合中提取 class 属性并将其直接设置到组件。这应该可以正常工作。

但是，如果你想强制完全重新渲染，你可以使用@key 属性来抑制 Blazor 的渲染优化：

<li @onclick="TabSelected" @key="key" @attributes="AdditionalAttributes">
@ChildContent
</li>
@code {
    int key = 0;
    void TabSelected {
         //do what you need
         key++;
    }
}

请注意，这可能会影响性能。更多信息在这里 https://docs.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-5.0#use-key-to-control-the-preservation-of-elements-and-components

说明

如果某些内容发生变化，例如参数值，Blazor 会使用一种算法来计算当前视图和即将出现的视图之间的差异。然后仅提交差异以操纵 DOM。 @key 指令用于给这个算法一个提示，应该保留什么元素。如果密钥不变，则无需重新渲染。

如果反转工具，此解决方案将发挥作用。如果我们希望一个组件无论实际内容如何都被重新渲染，我们需要更改密钥。

在您的示例中，每次选择选项卡时都应该重新呈现。选择一个计数器并在每次处理事件时增加它是很容易的。其他可能的方法，如新的 Guid 或随机数，也是可能的。

Blazor 修改 CaptureUnmatchedValues 已有属性不重新渲染

Blazor modifying CaptureUnmatchedValues existing attribute is not re-rendered

c#

blazor

blazor-webassembly