Blazor - 动态调用组件（按字符串）

Question

有没有一种优雅的方法可以通过名称作为字符串动态调用 blazor 组件。

而不是使用：

<User />

我想像在 Vue 框架中一样调用它：

<component :is="User" />

我找到了一个解决方案，但不是很优雅：

@dynamicComponent("App.Pages.User")

@code {

    RenderFragment dynamicComponent(string name) => builder =>
    {
        Type type = Type.GetType(name);
        builder.OpenComponent(0, type);

        builder.CloseComponent();
    };
}

有什么想法吗？

Answer 1

我认为，例如，假设我们定义了三个组件，

1. TabParent.razor
2. Tab.razor
3. TabContent.razor

这是它们的用法：

<TabParent CurrentTab="@currentTabName">
  <Tab @OnClick="@(() => swapTab("tab1"))">Tab 1</Tab>
  <Tab @OnClick="@(() => swapTab("tab2"))">Tab 2</Tab>

  <TabContent Name="tab1">
    Any other Components here
  </TabContent>

  <TabContent Name="tab2">
    Any other Components here
  </TabContent>
</TabParent>

@code {
  string currentTabName;

  void swapTab(string tabName)
  {
    currentTabName = tabName;
  }
}

这里是TabParent 组件：

<div>
  <CascadingValue Name="CurrentTab" Value="@CurrentTab">
    @ChildContent
  </CascadingValue>
</div>

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

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

这里是TabChild 组件：

@if(CurrentTab == TabName) // <-- this way the component won't render unless it is the current tab
{
  <div class="tab-content">
    @ChildContent
  </div>
}

@code {
  [CascadingParameter(Name="CurrentTab")]
  public string CurrentTab { get; set; }

  [Parameter]
  public string TabName { get; set; }

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