Blazor中通过@ref修改子组件属性未更新HTML内容问题

核心原因1：子组件未感知属性变化 #

你的Foo组件中，Paragraph是普通的自动属性，当父组件通过@ref直接修改它的值时，Blazor没有任何机制能检测到这个变化。Blazor组件的重新渲染必须由明确的状态变更通知触发，比如：

• 组件自身调用StateHasChanged()
• 标记为[Parameter]的属性被父组件更新
• 组件内的UI事件触发方法执行

这里修改的是子组件的内部普通属性，既没标记为参数，也没在修改后通知子组件刷新，所以子组件不会重新渲染，页面自然停留在初始值。

核心原因2：父组件调用StateHasChanged()无效 #

父组件调用StateHasChanged()只会触发父组件自身的重新渲染，但父组件并没有给Foo组件传递任何绑定参数（Paragraph是子组件自己的内部属性）。父组件重新渲染时，不会对Foo组件的内部属性做任何修改，所以子组件依然不会刷新。

两种可行的修复方案 #

方案1：把属性改为组件参数，通过父组件绑定更新

修改Foo组件，将Paragraph标记为参数：

<p>@Paragraph</p>
@code {
    [Parameter]
    public string Paragraph { get; set; } = "initial value";
}

父组件通过绑定控制属性值：

<Foo @bind-Paragraph="_currentText" />

@code {
    private string _currentText = "initial value";

    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            _currentText = "Changed";
            StateHasChanged();
        }
    }
}

方案2：子组件提供更新方法，内部触发刷新

修改Foo组件，封装属性并提供更新方法：

<p>@_paragraph</p>
@code {
    private string _paragraph = "initial value";
    // 可选：对外暴露只读属性
    public string Paragraph => _paragraph;

    public void UpdateParagraph(string newContent)
    {
        _paragraph = newContent;
        StateHasChanged(); // 主动通知组件刷新
    }
}

父组件调用子组件的更新方法：

<Foo @ref="_foo" />

@code {
    private Foo? _foo;

    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            _foo?.UpdateParagraph("Changed");
        }
    }
}

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