如何为BlazorBootstrap GridColumn指定上下文？解决context命名冲突

错误信息 #

Error RZ9999: 组件'GridColumn'的子内容元素'ChildContent'使用了与外层组件'AuthorizeView'的子内容元素'ChildContent'相同的参数名称('context')。

问题代码示例 #

<AuthorizeView> 
    <Grid @ref="GridB2bSupportSuiviMessage" TItem="B2bSupportSuiviMessage" Data="@v_Suivi.B2bSupportSuiviMessages" class="table table-hover table-bordered table-striped"> 
        <GridColumn TItem="B2bSupportSuiviMessage" HeaderText="Id" PropertyName="Id">@context.Id</GridColumn> 
        <GridColumn TItem="B2bSupportSuiviMessage" HeaderText="Date" PropertyName="DateMessage">@context.DateMessage</GridColumn> 
    </Grid> 
</AuthorizeView>

解决方法 #

给外层AuthorizeView的context指定自定义名称，避免和内层GridColumn的默认context冲突，修改后的代码如下：

<AuthorizeView Context="authContext"> <!-- 给AuthorizeView的context重命名为authContext -->
    <Grid @ref="GridB2bSupportSuiviMessage" TItem="B2bSupportSuiviMessage" Data="@v_Suivi.B2bSupportSuiviMessages" class="table table-hover table-bordered table-striped"> 
        <GridColumn TItem="B2bSupportSuiviMessage" HeaderText="Id" PropertyName="Id">@context.Id</GridColumn> <!-- 此处context仍对应GridColumn的行数据 -->
        <GridColumn TItem="B2bSupportSuiviMessage" HeaderText="Date" PropertyName="DateMessage">@context.DateMessage</GridColumn> 
    </Grid> 
</AuthorizeView>

如果需要用到AuthorizeView的上下文（比如获取当前用户信息），直接使用自定义别名即可：

<AuthorizeView Context="authContext">
    <p>当前用户：@authContext.User.Identity.Name</p>
    <!-- Grid代码保持不变 -->
</AuthorizeView>

原理说明 #

Blazor中嵌套组件若都使用默认的context参数名，会出现作用域冲突——编译器无法区分@context指向外层AuthorizeView的身份上下文，还是内层GridColumn的行数据上下文。给外层组件的context指定自定义名称后，就能明确区分两个不同的上下文对象，解决编译错误。

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