0

我刚刚构建了一个非常简单的 razor 组件来模板化页眉。现在我注意到我关于 ChildComponent != null 的条件总是正确的。有没有办法检查 ChildContent 是否定义了任何真实内容？

在我的示例中，PageTitleSecondaryRow 将始终呈现到我的页面中，即使 ChildContent 为空（但它不为 NULL）。我有哪些选项。作为一种解决方法，我现在将创建一个自定义 RenderFragment 属性，该属性在初始化时为空。但我不认为这是最终的解决方案。

<div class="wrapper border-bottom white-bg page-heading">
    <div class="row" id="PageTitlePrimaryRow">

        <div id="PageTitleIconColumn">
            @(IconMarkup())
        </div>
        <div  id="PageTitleTextColumn">
            <h2>
                @Title
            </h2>
            @if (Elements != null && Elements.Count > 0)
            {
                <TitleBreadcrumbs Elements="@Elements" />
            }
        </div>
        <div  id="PageTitlePostColumn">
        </div>
    </div>
    @if (ChildContent != null )
    {
        <hr />
        <div id="PageTitleSecondaryRow">
            @ChildContent
        </div>
    }
</div>
4

1 回答 1

0

正如彼得莫里斯所说， ChildContent 只有在您使用自闭语法时才为空<MyComponent />。这是因为这是任何内容被分配到的默认渲染片段，即使它是空内容。

建议为您的RenderFragment. 这样，如果它为空，你就知道它没有被显式设置。另一个好处是更准确地传达了渲染片段的内容。

考虑您有以下组件MyComponent.razor：

@if (ListItems != null) 
{
    <ul>
        <li> default item </li>
        @ListItems
    </ul>
}
else 
{
    <p>alternative content</p>
}

@code {
    [Parameter]
    public RenderFragment ListItems { get; set; }
}

通过为 RenderFragment 设置不同的名称，您必须在使用此组件时明确设置它。这捕获了 ChildContent 可能导致空 html 的意外情况：

@* displays only the alternative content *@
<MyComponent></MyComponent>

@* displays the ul element *@
<MyComponent>
    <ListItems>
        <li> other item </li>
    </ListItems>
</MyComponent>

基本相同，只是参数名称不同。这可以防止 Blazor 在您不使用自关闭语法时假定打开和关闭之间的任何内容都属于 ChildContent。

于 2021-03-22T14:40:38.323 回答