Blazor進階：RenderFragment

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

引言

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

好文章參考

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

Logo[AspNetCore 3.0 ] Blazor 服務端元件 Render, RenderFragment ，RenderTreeBuilder, CascadingValue/CascadingParameter 等等 - IT閱讀

應用上關鍵的知識

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

LogoASP.NET Core Blazor 樣板化元件docsmsft
ChildContent/RenderFragment 基本應用

再進一步自製 RenderFragment

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

白話文就是：用 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);
  }
}
PreviousMediatR 試用紀錄NextBlazor進階：隱含參數Context

Last updated