Blazor 选项卡不起作用 - 出现 WASM 错误：RuntimeError：函数签名不匹配

问题描述

所以，我一直在关注本教程来制作选项卡式组件：

https://blazor-university.com/templating-components-with-renderfragements/creating-a-tabcontrol/

我有以下几段代码：

标签：

<CascadingValue Value="this" IsFixed="true">
    <div class="">
        @foreach(var panel in Panels)
        {
            if(panel.TabName == ActiveTab.TabName)
            {
                <Button Type="ButtonTypes.Contained" Color="ButtonColors.Primary" OnClick="() => { ActivatePanel(panel); }">@panel.TabName</Button>
            }
            else
            {
                <Button Type="ButtonTypes.Outlined" Color="ButtonColors.Primary" OnClick="() => { ActivatePanel(panel); }">@panel.TabName</Button>
            }
        }
    </div>

    <div class="bg-white rounded-lg shadow-lg border @CssClass">
        @ChildContent
    </div>
</CascadingValue>



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

    [Parameter]
    public string CssClass { get; set; } = "";

    public TabPanel ActiveTab { get; set; } = new TabPanel();

    private List<TabPanel> Panels { get; set; } = new List<TabPanel>();

    internal void AddPage(TabPanel tabPage)
    {
        Panels.Add(tabPage);
        if (Panels.Count == 1)
            ActiveTab = tabPage;
        StateHasChanged();
    }


    void ActivatePanel(TabPanel page)
    {
        ActiveTab = page;
    }
}

面板：

@if(Parent.ActiveTab == this)
{
    @ChildContent
}


@code {

    [CascadingParameter]
    private Tabs Parent { get; set; } = new Tabs();

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

    [Parameter]
    public string CssClass { get; set; } = "";

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

    protected override void OnInitialized()
    {
        if(Parent == null)
            throw new ArgumentNullException(nameof(Parent),"TabPanel must exist within a Tabs component");
        base.OnInitialized();
        Parent.AddPage(this);
    }

}

它的用法是这样的：

<Tabs>
    <TabPanel TabName="Tab One">
        <Header HeaderType="HeaderTypes.H3">One</Header>
    </TabPanel>
    <TabPanel TabName="Tab Two">
        <Header HeaderType="HeaderTypes.H3">Two</Header>
    </TabPanel>
    <TabPanel TabName="Tab Three">
        <Header HeaderType="HeaderTypes.H3">Three</Header>
    </TabPanel>
</Tabs>

正如我在标题中所描述的，我收到了这个 wasm 错误：

有谁知道为什么会发生这种情况或者我该如何调试它？

解决方法

我无法解释这个特定错误的确切原因，但这一行导致了问题：

public TabPanel ActiveTab { get; set; } = new TabPanel();

您不应该像这里那样通过调用构造函数来创建组件。此外，这一行没有完成任何有用的事情，因为您在添加第一个选项卡时已经将 ActiveTab 初始化为非空值。

只需将此行更改为：

public TabPanel ActiveTab { get; set; }

你的问题就会消失。