Blazor模态组件无法接收参数传递内容的问题求助

使用自定义Blazor ModalDialog组件，原有代码可正常运行，但尝试在<ModalDialog>标签内添加HTML子内容时，触发以下编译错误：

Error   CS1660  Cannot convert lambda expression to type 'string' because it is not a delegate type

原有页面核心代码：

<h4>Contact List</h4>
<table>
    <thead>
        <th>Name</th>
        <th>Email</th>
    </thead>
    <tbody>
        @foreach (var item in contacts!)
        {
            <tr>
                <td>@item.Name</td>
                <td>@item.Email</td>
                <button @onclick="@(()=>OnConfirm(item.Name))">Delete</button>
            </tr>
        }
    </tbody>
</table>
<ModalDialog OnDelete="DeleteContact" @ref="modalDialog"></ModalDialog>

@code {
    private ModalDialog modalDialog;
    private List<Contact>? contacts = null;

    protected override void OnInitialized()
    {
        contacts = new List<Contact>(){
            new Contact(){Name="John ",Email="john@example.com"},
            new Contact(){Name="Bob",Email="bob@example.com"},
            new Contact(){Name="Bill",Email="bill@example.com"}
        };
        base.OnInitialized();
    }

    public void OnConfirm(string name){
        modalDialog.Name=name;
        modalDialog.ChildContent=$"Do you want to delete {name}";
        modalDialog.Show();
    }
    public void DeleteContact(){
        var c=contacts?.Find(x=>x.Name==modalDialog.Name);
        contacts.Remove(c);
        StateHasChanged();
        modalDialog.Close();
    }
}

尝试添加HTML子内容时的代码：

<ModalDialog OnDelete="DeleteContact" @ref="modalDialog">
    <div> hello </div>
</ModalDialog> 

1. 修改ModalDialog组件的ChildContent属性类型 #

组件中ChildContent当前定义为string类型，需改为Blazor组件子内容的标准类型RenderFragment：

// 原错误定义
// public string ChildContent { get; set; }

// 修改后
public RenderFragment ChildContent { get; set; }
// 若需支持空值，可改为
// public RenderFragment? ChildContent { get; set; }

2. 调整ModalDialog组件内的渲染逻辑 #

在ModalDialog的Razor代码中，直接渲染ChildContent即可（无需处理字符串转HTML）：

<!-- 原渲染方式（字符串） -->
<!-- @ChildContent -->

<!-- 修改后（直接渲染RenderFragment） -->
@ChildContent

3. 调整页面调用逻辑 #

无需在OnConfirm方法中给ChildContent赋值字符串，可通过两种方式传递内容：

• 静态子内容：直接在<ModalDialog>标签内编写HTML，结合组件参数动态展示数据：

  <ModalDialog OnDelete="DeleteContact" @ref="modalDialog">
      <div>Do you want to delete <strong>@modalDialog.Name</strong>?</div>
  </ModalDialog>
  

• 动态切换内容：若需根据不同场景展示不同内容，可给ModalDialog新增参数（如DeleteTargetName），在OnConfirm中赋值后由组件内部渲染：

  // ModalDialog组件新增参数
  public string DeleteTargetName { get; set; }
  
  // 页面OnConfirm方法
  public void OnConfirm(string name){
      modalDialog.DeleteTargetName = name;
      modalDialog.Show();
  }
  

  组件内渲染：

  <div>Do you want to delete <strong>@DeleteTargetName</strong>?</div>
  

错误原因 #

Blazor中，当在组件标签内编写HTML内容时，框架会自动将其包装为RenderFragment类型的lambda表达式。但你的ModalDialog组件期望ChildContent是string类型，类型不匹配导致了CS1660编译错误。

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