在 Blazor 中，通过修改布尔变量控制 class 属性动态添加/移除 CSS 类（如 show）时，若未显式触发重渲染，UI 不会更新——根本原因是组件状态变更未通知框架刷新，需手动调用 StateHasChanged()。
在 blazor 中，通过修改布尔变量控制 `class` 属性动态添加/移除 css 类（如 `show`）时，若未显式触发重渲染，ui 不会更新——根本原因是组件状态变更未通知框架刷新，需手动调用 `statehaschanged()`。
Blazor 的渲染机制基于“差异检测”（diffing），它仅在组件生命周期的特定时机（如事件处理、异步任务完成、父组件重渲染）自动触发 UI 更新。当你在子组件中通过外部引用（例如 @ref="childComponent"）调用 Show() 或 Hide() 方法时，该方法运行在非标准渲染上下文中——即使 Display 字段已更新，Blazor 并不会自动感知并重新渲染当前组件。
因此，必须在 Show() 和 Hide() 方法中显式调用 StateHasChanged()，强制组件立即执行一次状态检查与 DOM 同步：
<div class="loading-indicator @(Display ? " show :>
<div class="d-flex justify-content-center">
<div class="spinner-border loading-indicator-spinner text-light" role="status"></div>
</div>
</div>
@code {
public bool Display;
public void Show()
{
Display = true;
StateHasChanged(); // ✅ 关键：通知 Blazor 重新渲染本组件
}
public void Hide()
{
Display = false;
StateHasChanged(); // ✅ 同样适用于隐藏逻辑
}
}
⚠️ 注意事项：
- StateHasChanged() 仅影响当前组件，不会递归刷新子组件或父组件；
- 若 Display 是从父组件传入的 [Parameter]，则不应在子组件中直接修改它（应通过 EventCallback 通知父组件更新），此时也不应调用 StateHasChanged() 来响应参数变更——Blazor 会在参数更新后自动重渲染；
- 使用 @if (Display) { ... } 语法本身是有效的，但同样需确保 Display 变更能触发重渲染（即调用 StateHasChanged() 或由支持自动刷新的上下文驱动）；
- 避免在 StateHasChanged() 调用后立即再次修改状态并重复调用——可能引发不必要的渲染或警告（如“Render tree has changed during rendering”）。
总结：Blazor 中动态类绑定失效，90% 的情况源于状态变更未被框架捕获。牢记——手动修改字段 ≠ 自动刷新 UI；在非事件处理器或非生命周期方法中变更状态时，StateHasChanged() 是确保视图同步的必要手段。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
