Blazor组件内修改绑定属性无法触发UI更新问题求助

问题核心 #

内部组件直接修改绑定的ExpandModel属性时，Blazor的绑定系统未感知到属性变化，导致父组件中的MudCollapse UI未自动更新。手动调用StateHasChanged()能生效，但这是强制渲染的兜底方案，并非最优解。

正确解决办法 #

1. 让模型实现INotifyPropertyChanged接口 #

通过实现该接口，属性变更时主动通知绑定系统，触发UI自动更新：

public class ExpandModel : INotifyPropertyChanged
{
    private bool _expanded;
    public bool Expanded
    {
        get => _expanded;
        set
        {
            if (_expanded != value)
            {
                _expanded = value;
                OnPropertyChanged(nameof(Expanded));
            }
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

当内部组件修改Expanded属性时，PropertyChanged事件会通知Blazor更新绑定的UI元素，无需手动调用StateHasChanged()。

2. 通过回调让父组件处理状态变更 #

避免子组件直接修改模型，而是通过回调通知父组件更新状态，利用父组件的状态变更触发UI更新：

父组件代码

<MudCollapse IsExpanded="@Model.Expanded">
    <div>折叠面板内容</div>
    <ExpandComponent OnToggle="ToggleCollapse" />
</MudCollapse>
<MudButton OnClick="ToggleCollapse">ToggleOuter</MudButton>

@code {
    private ExpandModel Model = new();

    private void ToggleCollapse()
    {
        Model.Expanded = !Model.Expanded;
    }
}

子组件（ExpandComponent.razor）代码

<MudButton OnClick="TriggerToggle">ToggleInner</MudButton>

@code {
    [Parameter]
    public Action OnToggle { get; set; }

    private void TriggerToggle()
    {
        OnToggle?.Invoke();
    }
}

这种方式让状态变更的逻辑统一在父组件中，符合Blazor的组件通信规范，UI会自动响应父组件的状态变化。

为什么手动调用StateHasChanged()有效？ #

StateHasChanged()会强制组件重新计算渲染树，但这是绕过Blazor自动状态检测的方式，只有在特殊场景下才推荐使用。上述两种方案通过规范的状态变更通知机制，让UI自动响应变化，是更符合Blazor设计理念的做法。

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