Blazor tabs not working - Getting WASM error: RuntimeError: function signature mismatch
Blazor tabs not working - Getting WASM error: RuntimeError: function signature mismatch
所以,我一直在按照本教程制作选项卡式组件:
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; }
你的问题就会消失。
所以,我一直在按照本教程制作选项卡式组件:
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; }
你的问题就会消失。