使用DynamicComponent创建一个OneContainer

DynamicComponent是.NET 6中内置的动态渲染组件，比如根据下拉列表或者单选框中选择的内容来呈现组件。其实，基于DynamicComponent可以做很多好玩的事情，比如之前讲到的动态Modal。接下来我将讲下如果创建一个OneContainer组件。有些时候，我们可能会使用多个组件库，而每个组件库可能都有自己的Container，亦或者是我们自己的实现中有多个Container，比如有ModalContainer、NotificationContainer等等，那么我们可能需要在App.razor下面添加多个Container组件。通过利用DynamicComponent，我们可以很方便的添加多个组件库的Container。OneContainer代码如下：

OneContainer.razor：

@foreach(Type type in Components)
{
    <DynamicComponent Type="@type" />
}

@code{
    [Parameter]
    public List<Type> Components { get; set; } = new List<Type>();
}

DynamicComponent有三个参数，但是对于容器而言，一般没有任何参数，因此只用个类型即可。在App.razor中使用时候，如下即可：

<OneContainer Components="new List<Type>{ typeof(ModalContainer), typeof(NotifycationContainer) }" />

效果如下：

至于ModalContainer和NotifycationContainer是如何实现的不用关心，这里仅是模拟下而已。

示例代码：BlazorTricks/03-OneContainer at main · zxyao145/BlazorTricks (github.com)