Blazor中嵌套子组件@ref引用为null的解决方案咨询

你遇到的问题核心是未渲染的组件不会创建实例：当Foo组件的isVisible为false时，子组件Bar不会被Blazor实例化，因此@ref绑定的bar变量始终为null。以下是几种针对性的解决思路：

1. 先触发组件渲染，再调用实例方法 #

调整逻辑顺序，先让Foo显示以触发Bar的渲染，等待UI更新完成后再调用Bar的方法。可以通过异步方法配合InvokeAsync(StateHasChanged)实现：

<Foo @ref="foo">
    <Bar @ref="bar"/>
</Foo>

<button @onclick="() => LoadBar("some data")">Click</button>

@code {
    private Bar bar = null!;
    private Foo foo = null!;
    
    private async Task LoadBar(string data)
    {
        // 先让Foo显示，触发Bar渲染
        foo.SetVisible(true);
        // 强制触发组件渲染
        await InvokeAsync(StateHasChanged);
        // 等待渲染完成（简单实现，生产环境可通过组件生命周期事件优化）
        await Task.Delay(1);
        
        if (bar is not null)
        {
            bar.SetData(data);
        }
    }
}

2. 通过父组件传递数据，避免直接引用子组件 #

既然Bar是Foo的子组件，可在Foo中添加数据参数，由Foo负责在自身显示时将数据传递给Bar，彻底绕过@ref的问题：

Foo组件修改： #

@if(isVisible)
{
    <Bar Data="@BarData" />
}

@code {
    [Parameter] public string BarData { get; set; } = string.Empty;
    private bool isVisible;

    public void SetVisible(bool visible)
    {
        isVisible = visible;
        StateHasChanged();
    }
}

父组件修改： #

<Foo @ref="foo" BarData="@currentBarData" />

<button @onclick="() => LoadBar("some data")">Click</button>

@code {
    private Foo foo = null!;
    private string currentBarData = string.Empty;
    
    private void LoadBar(string data)
    {
        // 先更新数据
        currentBarData = data;
        // 再显示Foo，此时Bar会直接拿到最新数据
        foo.SetVisible(true);
    }
}

Bar组件接收参数： #

@code {
    [Parameter]
    public string Data { get; set; } = string.Empty;

    protected override void OnParametersSet()
    {
        // 替代SetData方法，在这里处理数据
        // ProcessReceivedData(Data);
    }
}

3. 使用共享状态容器实现数据同步 #

创建一个全局或作用域内的状态类，让Bar组件订阅状态变化，父组件只需更新状态，Bar渲染后自动获取最新数据：

状态类： #

public class BarState
{
    private string _currentData = string.Empty;
    public event Action? DataUpdated;

    public string CurrentData
    {
        get => _currentData;
        set
        {
            _currentData = value;
            DataUpdated?.Invoke();
        }
    }
}

注册状态服务（Program.cs）： #

builder.Services.AddScoped<BarState>();

父组件： #

<Foo @ref="foo" />

<button @onclick="() => LoadBar("some data")">Click</button>

@code {
    private Foo foo = null!;
    [Inject] private BarState BarState { get; set; } = null!;
    
    private void LoadBar(string data)
    {
        // 更新共享状态
        BarState.CurrentData = data;
        // 显示Foo
        foo.SetVisible(true);
    }
}

Bar组件： #

@implements IDisposable

@code {
    [Inject] private BarState BarState { get; set; } = null!;

    protected override void OnInitialized()
    {
        // 订阅状态变化
        BarState.DataUpdated += HandleDataUpdate;
    }

    private void HandleDataUpdate()
    {
        // 使用最新数据处理业务
        // SetData(BarState.CurrentData);
        StateHasChanged();
    }

    public void Dispose()
    {
        // 取消订阅，避免内存泄漏
        BarState.DataUpdated -= HandleDataUpdate;
    }
}

4. 视觉隐藏而非销毁组件（不推荐） #

如果不需要完全销毁Bar组件，只是视觉上隐藏，可以用CSS控制显示/隐藏，而非条件渲染。这样Bar会始终保持实例化，@ref就能拿到引用，但会增加不必要的组件开销：

Foo组件修改： #

<div style="@(isVisible ? "display:block" : "display:none")">
    <Bar @ref="BarRef" />
</div>

@code {
    public Bar BarRef { get; set; } = null!;
    private bool isVisible;

    public void SetVisible(bool visible)
    {
        isVisible = visible;
        StateHasChanged();
    }
}

父组件调用： #

<Foo @ref="foo" />

<button @onclick="() => LoadBar("some data")">Click</button>

@code {
    private Foo foo = null!;
    
    private void LoadBar(string data)
    {
        foo.SetVisible(true);
        // 直接通过Foo的引用调用Bar的方法
        foo.BarRef.SetData(data);
    }
}

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