如何判断一个 RenderFragment 是否有内容答案

【问题标题】：How to determine if a RenderFragement has a content如何判断一个 RenderFragment 是否有内容
【发布时间】：2021-01-11 18:39:19
【问题描述】：

我刚刚构建了一个非常简单的 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>

【问题讨论】：

只有在使用自闭合语法<MyComponent /> 时，名为 ChildContent 的渲染片段才会为空
好的。谢谢@peter-morris。这就解释了为什么有时空检查的行为就像我想要的那样。有什么方法可以访问 RenderFragment 的一些内部信息。我唯一需要知道的是 ChildContent 对象中嵌套了任何组件或元素。我的问题是我组件中的 ChildContent 是从父组件传递的。所以在父级中永远不会有自闭合语法，因为它被视为简单的占位符。
我没有办法知道。您可以改为将名称更改为 ChildContent 以外的其他名称，然后组件的使用者将需要显式包含属性的名称，例如 - 这样可以轻松检查它是否已添加（它不会为空）

标签： razor blazor blazor-server-side razor-components

【解决方案1】：

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

建议为您的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。

【讨论】：