究竟是什么触发Blazor组件重新绘制自身?

我有Blazor WebAssembly应用程序。我有一个共享模型类的父子组件。当子级更新模型上的值时,子级会重绘自身,而父级不会重绘。那么究竟是什么确切地触发Blazor组件重新绘制自身?在Blazor的这一特定方面,我找不到任何文档。

我有一个POCO模型课。在实际应用中,这来自单独的程序集。型号/AwesomenessModel.cs:

namespace BlazorApp.Models {
    public class AwesomenessModel {
        public int? Level { get; set; }
    }
}

我的索引页面。 Pages / Index.razor:

@page "/"

@using BlazorApp.Components
@using BlazorApp.Models

<Awesomeness AwesomenessModel="@AwesomenessModel"></Awesomeness>

@code {
    private AwesomenessModel AwesomenessModel = new AwesomenessModel();
}

父类。我添加了一个重绘按钮以验证内容是否已更改。 Components / Awesomeness.razor:

@using BlazorApp.Models

@if (AwesomenessModel.Level.HasValue) {
    <div>Awesomeness is @AwesomenessModel.Level.Value</div>
} else {
    for (int i = 0; i < 10; i++) {
        <AwesomenessSelector AwesomenessModel="@AwesomenessModel" Level="@i"></AwesomenessSelector>
    }
}
<div><button class="btn btn-link" @onclick="RedrawClick">Redraw</button></div>

@code {
    [Parameter]
    public AwesomenessModel AwesomenessModel { get; set; }

    private void RedrawClick() {
        this.StateHasChanged();
    }
}

对Awesomeness模型进行实际更改的子组件。组件/AwesomenessSelector.razor:

@using BlazorApp.Models

@if (!AwesomenessModel.Level.HasValue) {
    <div><button class="btn btn-link" @onclick="LevelClick">@Level</button></div>
}

@code {
    [Parameter]
    public AwesomenessModel AwesomenessModel { get; set; }

    [Parameter]
    public int Level { get; set; }

    private void LevelClick() {
        AwesomenessModel.Level = Level;
    }
}

当我运行该应用程序并单击一个令人敬畏的级别时,该级别消失(AwesomenessSelector组件重新绘制),但其余部分仍然可见,并且没有“ Awesomeness is ...”消息(该敬畏组件未更新) )。如果然后单击“重绘”按钮强制重绘Awesomeness组件,则会收到正确的“ Awesomeness is ...”消息。

我可能没有以正确的方式构造代码以使父组件自动重绘。在这种情况下,我应该如何构造它?

coalawang 回答:究竟是什么触发Blazor组件重新绘制自身?

子组件为OnLevelClick添加一个EventCallback

@using BlazorApp.Models

@if (!AwesomenessModel.Level.HasValue) {
    <div><button class="btn btn-link" @onclick="LevelClick">@Level</button></div>
}

@code {
    [Parameter]
    public AwesomenessModel AwesomenessModel { get; set; }

    [Parameter]
    public int Level { get; set; }

    [Parameter]
    public EventCallback<string> OnLevelClick { get; set; }

    private void LevelClick() {
        AwesomenessModel.Level = Level;
        OnLevelClick.InvokeAsync();
    }
}

父组件为OnLevelClick添加处理程序

@using BlazorApp.Models

@if (AwesomenessModel.Level.HasValue) {
    <div>Awesomeness is @AwesomenessModel.Level.Value</div>
} else {
    for (int i = 0; i < 10; i++) {
        <AwesomenessSelector AwesomenessModel="@AwesomenessModel" Level="@i" @OnLevelClick="OnLevelClick"></AwesomenessSelector>
    }
}

@code {
    [Parameter]
    public AwesomenessModel AwesomenessModel { get; set; }

    private void OnLevelClick() {
        this.StateHasChanged();
    }
}

希望这会有所帮助

,

您需要在不知道子代已更新的父控件上使用StateHasChanged()。我相信您应该在子级上创建一个事件,该事件在您需要更新父级时触发。然后在事件StateHasChanged()被触发时在父节点上。所有的理论都应该起作用。

本文链接:https://www.f2er.com/3119122.html

大家都在问