Blazor中非父子组件交互与跨组件数据同步问题

问题1：@ref获取Component2实例传递给Component1时报错 #

原因 #

Blazor中组件的@ref引用仅在组件完成首次渲染后才会被赋值，直接在组件初始化阶段传递@ref变量会因为上下文未初始化导致报错。另外，直接传递组件实例属于紧耦合写法，不符合Blazor组件解耦设计原则。

解决方法 #

放弃直接传递组件实例，改用共享状态+事件回调实现控制：

• 在父页面（或共享状态容器）中定义控制Component2显示隐藏的状态变量，比如bool ShowComponent2A { get; set; }、bool ShowComponent2B { get; set; }
• 将状态变量通过参数传递给两个Component2，同时给Component1传递修改这些状态的回调方法
• Component1通过调用回调方法修改父页面状态，父页面状态变更后自动同步到两个Component2

示例代码片段：

<!-- 父页面 -->
<Component1 OnToggleComponent2A="ToggleComponent2A" OnToggleComponent2B="ToggleComponent2B" />
<Component2 IsVisible="@ShowComponent2A" />
<Component2 IsVisible="@ShowComponent2B" />

@code {
    private bool ShowComponent2A = true;
    private bool ShowComponent2B = true;

    private void ToggleComponent2A()
    {
        ShowComponent2A = !ShowComponent2A;
        StateHasChanged();
    }

    private void ToggleComponent2B()
    {
        ShowComponent2B = !ShowComponent2B;
        StateHasChanged();
    }
}

<!-- Component1.razor -->
<button @onclick="() => OnToggleComponent2A?.Invoke()">切换Component2A显示</button>
<button @onclick="() => OnToggleComponent2B?.Invoke()">切换Component2B显示</button>

@code {
    [Parameter] public Action? OnToggleComponent2A { get; set; }
    [Parameter] public Action? OnToggleComponent2B { get; set; }
}

<!-- Component2.razor -->
@if(IsVisible)
{
    <div>我是Component2</div>
}

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

问题2：级联值+XPageContext状态不同步 #

原因 #

如果MyModel是普通CLR对象（未实现INotifyPropertyChanged接口），或者XPageContext在状态变更时没有调用StateHasChanged()触发组件重新渲染，就会导致修改一个Component2的Model值后，另一个Component2无法感知变化。

解决方法 #

方案1：让MyModel实现INotifyPropertyChanged

public class MyModel : INotifyPropertyChanged
{
    private string _firstName;
    public string FirstName
    {
        get => _firstName;
        set
        {
            if (_firstName != value)
            {
                _firstName = value;
                OnPropertyChanged(nameof(FirstName));
            }
        }
    }

    public event PropertyChangedEventHandler? PropertyChanged;

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

方案2：使用可观察的状态容器

将XPageContext设计为包含可观察状态，状态变更时主动通知所有依赖组件：

public class XPageContext
{
    private MyModel _myModel;
    public MyModel MyModel
    {
        get => _myModel;
        set
        {
            _myModel = value;
            StateChanged?.Invoke();
        }
    }

    public event Action? StateChanged;

    public void UpdateFirstName(string newName)
    {
        MyModel.FirstName = newName;
        StateChanged?.Invoke();
    }
}

在使用级联值的组件中订阅状态变更事件：

<!-- Component2.razor -->
<div>当前名字：@XPageContext.MyModel.FirstName</div>
<input @bind="@XPageContext.MyModel.FirstName" @bind:event="oninput" />

@code {
    [CascadingParameter] public XPageContext? XPageContext { get; set; }

    protected override void OnInitialized()
    {
        if (XPageContext != null)
        {
            XPageContext.StateChanged += StateHasChanged;
        }
    }

    public void Dispose()
    {
        if (XPageContext != null)
        {
            XPageContext.StateChanged -= StateHasChanged;
        }
    }
}

注意事项

• 确保XPageContext是单例或在父级页面中实例化并保持唯一，避免多实例导致状态不一致
• 组件销毁时取消订阅状态变更事件，防止内存泄漏

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