Blazor 无法读取未定义的属性父节点

Question

在下面的代码中，当我单击按钮时，它没有显示hello 文本，而是抛出异常：无法读取未定义的属性父节点。我知道我可以通过多种方式解决它，但这是什么原因呢？为什么会这样？

@page "/"
@{
void click()
{
<h1>Hello</h1>
}
}
<button @onclick="click">Click me!</button>

Answer 1

正确的方法是

@page "/"
@if (ShowH1)
{
<h1>Hello</h1>
}
<button @onclick="Click">Click me!</button>
@code
{
bool ShowH1 = false;
void Click()
{
ShowH1 = !ShowH1;
}
}

代码不起作用的原因是 .razor 文件中的所有标记(@code之外(都被转译为 C#，覆盖BuildRenderTree。

BuildRenderTreee传递一个参数RenderTreeBuilder __builder呈现到。您的方法被转译为嵌入式方法，如下所示

protected override void BuildRenderTree(RenderTreeBuilder __builder)
{
void click()
{
__builder.AddMarkupContent(0, "tt");
__builder.AddMarkupContent(1, "<h1>Hello</h1>rn");
}
__builder.AddMarkupContent(2, "rn");
__builder.OpenElement(3, "button");
__builder.AddAttribute(4, "onclick", ... call our click method));
__builder.AddContent(5, "Click me!");
__builder.CloseElement();
}

因此，在这里您可以看到该按钮调用了我们的嵌入式click方法，该方法捕获了在组件渲染时传递的__builder参数。

但是__builder仅在渲染时有效。当用户单击该按钮时，__builder现在无效，但您的代码在其上执行__builder.AddMarkupContent(....)- 因此会导致异常。

Answer 2

您的语法和方式不正确。试试这个。

@page "/"
<h1>@text</h1>
<button @onclick="@click">Click me</button>
@code 
{
private string text;
private void click()
{
text = "Hello";
}
}