Blazor组件通过@ref修改状态后未触发渲染，原因是什么？

先还原你的代码结构： #

/filemanager 页面代码

@page "/filemanager"
<FolderComponent/>

FolderComponent.razor

<p2> some stuff </p2>
<MyModalComponent @ref="modalref"/>

@code {
    private MyModalComponent? modalref;

    // 假设你在这里调用 modalref?.ShowModal();
}

MyModalComponent.razor

@if (showModal)
{ 
   <h1>Modal Body</h1>
}

@code{
  bool showModal = false;

  public void ShowModal()
  {
     showModal = true;
  }
}

为什么直接调用ShowModal()不显示模态框？ #

Blazor组件的渲染是触发式的，只有在特定场景下才会自动重新渲染UI：

• 组件的[Parameter]属性值发生变化
• 组件内部触发UI事件（比如按钮点击、输入框变更）
• 调用StateHasChanged()手动通知状态变更

你通过@ref调用子组件的ShowModal()方法时，只是修改了子组件内部的showModal变量，但这个操作不在Blazor自动触发渲染的场景里。子组件的状态确实变了，但Blazor不知道需要重新渲染它的UI，所以模态框不会显示。

两种可行方案的原理 #

1. 调用StateHasChanged()
   在子组件的ShowModal()方法末尾加上StateHasChanged()，手动告诉Blazor：“我的状态变了，重新渲染我吧”。修改后的子组件代码：

   @if (showModal)
   { 
      <h1>Modal Body</h1>
   }
   
   @code{
     bool showModal = false;
   
     public void ShowModal()
     {
        showModal = true;
        StateHasChanged(); // 手动触发渲染
     }
   }
   

2. 通过[Parameter]传递状态
   把showModal改成子组件的参数，由父组件FolderComponent控制这个状态值。当父组件修改这个参数时，Blazor会自动检测到参数变化，触发子组件的重新渲染。这种方式更符合Blazor的组件通信设计模式：

   • 子组件修改：

     @if (ShowModal)
     { 
        <h1>Modal Body</h1>
     }
     
     @code{
       [Parameter]
       public bool ShowModal { get; set; }
     }
     

   • 父组件修改：

     <p2> some stuff </p2>
     <MyModalComponent ShowModal="@_showModal"/>
     <button @onclick="() => _showModal = true">打开模态框</button>
     
     @code {
         private bool _showModal;
     }
     

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