Blazor WASM中CSS类无法更新的问题排查求助

我尝试基于布尔值修改<span>元素的CSS类，已将布尔值保存至localStorage，Console.WriteLine显示SidenavClass能获取到正确的类名，但HTML中的<span>元素并未添加该类名。我也尝试调用StateHasChanged()，但似乎不起作用。组件采用三层嵌套结构：ProductCategoriesNavMenu.razor 嵌套于 NavMenu.razor 中，NavMenu.razor 又嵌套于 MainLayout.razor 中。

相关组件代码 #

ProductCategoriesNavMenu.razor #

@foreach (var productCategory in ProductCategoryDtos)
{
    var link = "ProductsByCategory/" + productCategory.Id;

    <div class="nav-item px-3">
        <NavLink class="nav-link" href="@link">
            <span class="@productCategory.IconCSS"></span><span class="@SidenavClass">@productCategory.Name</span>
        </NavLink>
    </div>
}

<div class="@SidenavClass">TEST</div>

@code {
    public bool collapsedMenu { get; set; }
    public string SidenavClass => collapsedMenu ? "collapsed-sidenav" : "";


    public async Task CollapseMenuToggler()
    {
        await Task.Delay(500);
        collapsedMenu = await LocalStorage.GetItemAsync<bool>("Menu Collapsed");
        Console.WriteLine("collapsedMenu: " + collapsedMenu + ", Class: " + SidenavClass);
        StateHasChanged();
    }
}

NavMenu.razor #

<ProductCategoriesNavMenu/>

@code {
    public static string Class = "collapsed-sidenav";

    [Parameter] public EventCallback<bool> CollapseSidebarEvent { get; set; }

    public void CollapseMenu(MouseEventArgs e)
    {
        collapsedSidenav = !collapsedSidenav;
        LocalStorage.SetItemAsync<bool>("Menu Collapsed", collapsedSidenav);
        if(collapsedSidenav)
        {
            LocalStorage.SetItemAsync<string>("Collapse Class", Class);
        }
        else
        {
            LocalStorage.SetItemAsync<string>("Collapse Class", "");
        }
        CollapseMenuToggler();
        CollapseSidebarEvent.InvokeAsync(collapsedSidenav);
    }
}

MainLayout.razor #

<NavMenu CollapseSidebarEvent="(e)=>SidenavCollapsedHandler(e)" />

核心问题1：子组件方法未被正确调用 #

NavMenu 里的 CollapseMenuToggler() 是当前组件的方法，并没有实际调用到 ProductCategoriesNavMenu 子组件的同名方法，导致子组件的collapsedMenu状态从未更新。

解决步骤：

1. 在NavMenu中添加子组件引用：

<ProductCategoriesNavMenu @ref="_productCategoriesMenu"/>

2. 在NavMenu的代码块中声明引用变量，并修改CollapseMenu方法为异步，直接调用子组件的方法：

@code {
    private ProductCategoriesNavMenu _productCategoriesMenu;
    private bool collapsedSidenav; // 补充原代码缺失的字段声明

    public async Task CollapseMenu(MouseEventArgs e)
    {
        collapsedSidenav = !collapsedSidenav;
        // 等待localStorage操作完成，避免状态不同步
        await LocalStorage.SetItemAsync<bool>("Menu Collapsed", collapsedSidenav);
        
        if(collapsedSidenav)
        {
            await LocalStorage.SetItemAsync<string>("Collapse Class", Class);
        }
        else
        {
            await LocalStorage.SetItemAsync<string>("Collapse Class", "");
        }
        
        // 调用子组件的更新方法
        await _productCategoriesMenu.CollapseMenuToggler();
        await CollapseSidebarEvent.InvokeAsync(collapsedSidenav);
    }
}

核心问题2：状态同步方式低效且不可靠 #

依赖localStorage传递状态属于间接同步，还引入了不必要的异步延迟。Blazor组件间更高效的状态传递方式是直接通过参数绑定。

优化方案：

1. 修改ProductCategoriesNavMenu，通过参数接收状态：

@foreach (var productCategory in ProductCategoryDtos)
{
    var link = "ProductsByCategory/" + productCategory.Id;

    <div class="nav-item px-3">
        <NavLink class="nav-link" href="@link">
            <span class="@productCategory.IconCSS"></span><span class="@SidenavClass">@productCategory.Name</span>
        </NavLink>
    </div>
}

<div class="@SidenavClass">TEST</div>

@code {
    [Parameter] public bool CollapsedMenu { get; set; }
    public string SidenavClass => CollapsedMenu ? "collapsed-sidenav" : "";
}

2. 在NavMenu中直接传递参数，移除冗余的localStorage类名存储和子组件方法调用：

<ProductCategoriesNavMenu CollapsedMenu="collapsedSidenav"/>

@code {
    private bool collapsedSidenav;
    [Parameter] public EventCallback<bool> CollapseSidebarEvent { get; set; }

    // 初始化时从localStorage读取状态
    protected override async Task OnInitializedAsync()
    {
        collapsedSidenav = await LocalStorage.GetItemAsync<bool>("Menu Collapsed");
    }

    public async Task CollapseMenu(MouseEventArgs e)
    {
        collapsedSidenav = !collapsedSidenav;
        await LocalStorage.SetItemAsync<bool>("Menu Collapsed", collapsedSidenav);
        await CollapseSidebarEvent.InvokeAsync(collapsedSidenav);
        // 参数更新会自动触发子组件渲染，无需手动调用StateHasChanged
    }
}

额外注意事项 #

• 确保NavMenu中已声明collapsedSidenav字段，原代码中缺失该定义会导致编译或运行错误。
• 所有LocalStorage的异步操作必须使用await等待完成，否则会出现状态写入不及时的问题。
• 移除Task.Delay(500)这类硬编码延迟，这是不可靠的临时方案，组件参数绑定才是Blazor状态同步的正确方式。

内容的提问来源于stack exchange，提问作者KroSral