Blazor進階：RenderFragment

為工作紀錄。RenderTreeBuilder, RenderFragment, ChildContent。Blazor Advance。

引言

在 Blaozr App 專業應用就需要寫共用的元件，就會慢慢的越管越寬，就會用到 ChildContent，就必需會用 RenderFragment。

好文章參考

這文章寫得很好就讀這篇就行了。

https://www.itread01.com/content/1573527843.htmlwww.itread01.com

應用上關鍵的知識

Bazor 畫面的 render 是用 BuildRenderTree 函式繪製。我們可以 override 它但不建議這麼做。就到現在的經驗，好好的應用 ChildContent這個內建參數就好。ChildContent參數的類型是RenderFragment。下面文章是 ChildContent/RenderFragment 基本應用。

ASP.NET Core Blazor 樣板化元件MicrosoftLearn

ChildContent/RenderFragment 基本應用

再進一步自製 RenderFragment

再進階深入就有更動態的RenderFramgnet撰寫需求，下面是官方的說明：

• RenderFragment 代理人 代表 UI 內容的區段，實作為將內容寫入至的委派 RenderTreeBuilder

• RenderFragment<TValue>代理人 代表型別物件的 UI 內容區段，實作為傳回的函式 TValue RenderFragment 。

白話文就是：用 RenderFragment 表示呈現在畫面上的一段區塊(section)，在實作上用 RenderFragment<TValue> 實作出 RenderFragment。

FooComponent.razor

<div style="border:solid 1px red;">
  <h3>FooComponent</h3>
  @FooSection
</div>

@code {
  // 產生ＵＩ的函式
  RenderFragment<string> renderValue = (v) => @<span>@v</span>;
  // 呼叫產生ＵＩ的函式
  RenderFragment FooSection => renderValue("Hello World");
}

原始碼紀錄

AsvtStaticField.razor

@typeparam T
@inherits AsvtFieldBase<T>

<MudItem md=@md lg=@md>

  <MudField Label=@_label
            HelperText=@HelperText
            Variant=Variant.Filled
            ChildContent=@GetChildContent() />

</MudItem>

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

  RenderFragment<T> renderValue = (v) => @<span>@v</span>;

  RenderFragment GetChildContent()
  {
    if (ChildContent is not null)
      return ChildContent;
    else if (FieldValue is null || FieldValue == null)
      return null; // null
    else if (FieldValue is string && string.Empty.Equals(FieldValue))
      return null; // empty
    else
      return renderValue(FieldValue);
  }
}