如何將可選的 RenderFragment 從父組件傳遞給 Blazor 中的子組件？

Question

上下文：我們有一個 Blazor 應用程序，其中包含以下 3 個文件：

ChildComponent.razor
父組件.razor
Test.razor（這是消費者，使用父組件）

ChildComponent.razor

<div>
    @if(Body != null)
    {
        @Body
    }

    @if(Footer != null)
    {
        <div class="footer">
            @Footer
        </div>
    }
</div>

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

父組件.razor

ParentComponent 使用 ChildComponent。 我們想將ParentFooter傳遞給 Childcomponent 的Footer ：

<ChildComponent Footer="ParentFooter">
    <Body>
        <p>@Text</p>
    </Body>
</ChildComponent>

@code
{
    [Parameter]
    public string Text { get; set; }

    [Parameter]
    public RenderFragment ParentFooter { get; set; }
}

消費文件是Test.razor ，如下所示：

<ParentComponent Text="Hello World"></ParentComponent>

我們在這里不使用<ParentFooter></ParentFooter> ，因為頁腳是可選的。

問題：

我們在瀏覽器的控制台中得到一個異常：

未處理的異常渲染組件：委托給實例方法不能有 null 'this'（參數 'this'）

可能的解決方案：

在文件ParentComponent.razor中，我們通過引用傳遞頁腳並進行null -check：

<ChildComponent Footer="ParentFooter" @ref="m_ChildComponentRef">
    <Body>
        <p>@Text</p>
    </Body>
</ChildComponent>

@code
{
    [Parameter]
    public string Text { get; set; }

    [Parameter]
    public RenderFragment ParentFooter { get; set; }
    
    private ChildComponent m_ChildComponentRef { get; set; }
    
    protected override void OnParametersSet()
    {
        base.OnParametersSet();

        if (ParentFooter != null)
        {
            m_ChildComponentRef.Footer = ParentFooter;
        }
    }   
}

但這是一個不好的方法，因為我們會收到警告：

BL0005：不應在其組件之外設置組件參數。

問題：我們如何將可選的 RenderFragment 傳遞給子組件？

Answer 1

使用CascadingValue有效：

父組件.razor：

<CascadingValue Value="this">
    <ChildComponent>
        <Body>
            <p>@Text</p>
        </Body>
    </ChildComponent>
</CascadingValue>

@code
{
    [Parameter]
    public string Text { get; set; }

    [Parameter]
    public RenderFragment ParentFooter { get; set; }
}

ChildComponent.razor：

<div>
    @if (Body != null)
    {
        @Body
    }

    @if (ParentComponent != null && ParentComponent.ParentFooter != null)
    {
        <div class="footer">
            @ParentComponent.ParentFooter
        </div>
    }
</div>

@code
{
    [CascadingParameter]
    public ParentComponent ParentComponent { get; set; }

    [Parameter]
    public RenderFragment Body { get; set; }
}

測試.razor：

<ParentComponent Text="Hello World">
    @* <ParentFooter>Footer</ParentFooter> // <- Optional *@
</ParentComponent>

Answer 2

我想如果你想用RenderFragment構建你的頁腳，它會很容易傳遞。

父組件

<ChildComponent Footer="@GenerateFooter()" />

@code {
    // Your Method that will generate footer for you
      private RenderFragment GenerateFooter() {
           return builder => {
                   builder.OpenComponent(0, typeof(YourFooterComponent));
                   builder.AddAttribute(1, "YourRandomAttribute", "YourValueForAttribute")
                   builder.CloseComponent();
               }
      }
}

子組件

@*The place where you'd like to show your footer.*@
@Footer


@code{

    [Parameter]
    public RenderFragment Footer { get; set; }

}

如果您不想僅為頁腳創建另一個組件，您可以通過 builder.OpenElement()... 執行此操作並創建您需要的元素以及必需的 styles 和類，所有這些都可以使用屬性來完成。 BlazoreUniversity 是一個包含很多很酷東西的網站。

讓我知道它是否對您有幫助，對未來也更好。 因為自從問題發布以來已經很晚了。

Answer 3

您是否嘗試將參數設置為子組件中的默認值，使其看起來像這樣

<div>
@if(Body != null)
{
    @Body
}

@if(Footer != null)
{
    @Footer
}

@code
{
    [Parameter]
    public RenderFragment Body { get; set; } = null;
    
    [Parameter]
    public RenderFragment Footer { get; set; } = null;
}

在父組件中，您還設置了默認值

 @if(ParentFooter != null)
  {
   <ChildComponent Footer="ParentFooter">
        <Body>
            <p>@Text</p>
        </Body>
    </ChildComponent>
    }
else {
// show something else 
}
    @code
    {
        [Parameter]
        public string Text { get; set; }
    
        [Parameter]
        public RenderFragment ParentFooter { get; set; } = null;
    }

如果這沒有幫助，您能否發布 github 鏈接

問候，

如何將可選的 RenderFragment 從父組件傳遞給 Blazor 中的子組件？

問題描述

3 個解決方案

解決方案1
0 2021-02-19 08:10:47

解決方案2
0 2021-03-06 18:03:47

解決方案3
-1 2021-01-28 19:14:58

如何將可選的 RenderFragment 從父組件傳遞給 Blazor 中的子組件？

問題描述

3 個解決方案

解決方案1 0 2021-02-19 08:10:47

解決方案2 0 2021-03-06 18:03:47

解決方案3 -1 2021-01-28 19:14:58

解決方案1
0 2021-02-19 08:10:47

解決方案2
0 2021-03-06 18:03:47

解決方案3
-1 2021-01-28 19:14:58