Kerülje a paraméterek felülírását a ASP.NET Core-ban Blazor

Készítette: Robert Haken

Ez a cikk azt ismerteti, hogyan kerülheti el a paraméterek felülírását az alkalmazásokban Blazor az újrarendezés során.

Felülírt paraméterek

A Blazor keretrendszer általában biztonságos szülő–gyermek paraméter-hozzárendelést ír elő:

• A paraméterek nem írhatók felül váratlanul.
• A mellékhatások minimálisra csökkennek. A további renderelések például elkerülhetők, mert végtelen renderelési ciklusokat hozhatnak létre.

A gyermekösszetevők új paraméterértékeket kapnak, amelyek felülírják a meglévő értékeket a szülőösszetevő újrarendezésekor. A gyermekösszetevő paraméterértékeinek véletlen felülírása gyakran akkor fordul elő, ha az összetevőt egy vagy több adathoz kötött paraméterrel fejleszti, és a fejlesztő közvetlenül a gyermek egy paraméterére ír:

• A gyermekösszetevő egy vagy több paraméterértékkel jelenik meg a szülőösszetevőből.
• A gyermek közvetlenül egy paraméter értékére ír.
• A szülőösszetevő újrarenderel és felülírja a gyermek komponens paraméterének értékét.

A paraméterértékek felülírásának lehetősége a gyermekösszetevő tulajdonságelemeire set is kiterjed.

Fontos

Általános útmutatónk, hogy ne hozzon létre olyan összetevőket, amelyek közvetlenül a saját paramétereikre írnak az összetevő első renderelése után.

Vegye figyelembe a következő ShowMoreExpander összetevőt:

• Megjeleníti a címet.
• A gyermektartalmat jeleníti meg a kijelöléskor.
• Lehetővé teszi a kezdeti állapot beállítását egy összetevőparaméterrel (InitiallyExpanded).

Miután a következő ShowMoreExpander összetevő egy felülírt paramétert mutat be, megjelenik egy módosított ShowMoreExpander összetevő, amely bemutatja a forgatókönyv megfelelő megközelítését. A következő példák egy helyi mintaalkalmazásban helyezhetők el a leírt viselkedések megtapasztalásához.

ShowMoreExpander.razor:

<div @onclick="ShowMore" class="card bg-light mb-3" style="width:30rem">
    <div class="card-header">
        <h2 class="card-title">Show more (<code>Expanded</code> = @InitiallyExpanded)</h2>
    </div>
    @if (InitiallyExpanded)
    {
        <div class="card-body">
            <p class="card-text">@ChildContent</p>
        </div>
    }
</div>

@code {
    [Parameter]
    public bool InitiallyExpanded { get; set; }

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

    private void ShowMore() => InitiallyExpanded = true;
}

Az ShowMoreExpander összetevő a következő Expanders szülőösszetevőhöz van hozzáadva, és lehet, hogy meghívja a StateHasChanged-t.

• A fejlesztői kód meghívása StateHasChanged értesíti az összetevőt, hogy az állapota megváltozott, és általában az összetevők újrarendezését kéri a felhasználói felület frissítéséhez. StateHasChanged részletesebben ASP.NET Core-összetevők Razor életciklusáról és ASP.NET Core-összetevők Razor renderelésében olvashat.
• A gomb direktíva attribútuma @onclick egy eseménykezelőt csatol a gomb eseményéhez onclick . Az eseménykezelésről a ASP.NET Core-eseménykezelés Blazorkésőbbi részében olvashat bővebben.

Expanders.razor:

@page "/expanders"

<PageTitle>Expanders</PageTitle>

<h1>Expanders Example</h1>

<ShowMoreExpander InitiallyExpanded="false">
    Expander 1 content
</ShowMoreExpander>

<ShowMoreExpander InitiallyExpanded="false" />

<button @onclick="StateHasChanged">Call StateHasChanged</button>

Kezdetben az ShowMoreExpander összetevők egymástól függetlenül viselkednek a tulajdonságaik InitiallyExpanded beállításakor. A gyermekösszetevők a várt módon tartják fenn az állapotukat.

Ha a StateHasChanged-t egy szülőkomponens hívja meg, akkor a Blazor keretrendszer újrarajzolja a gyermekkomponenseket, ha azok paraméterei változtak.

• A kifejezetten ellenőrző paramétertípusok Blazor csoportjában újrarendez egy gyermekösszetevőt, Blazor ha azt észleli, hogy a paraméterek bármelyike módosult.
• A nem ellenőrzött paramétertípusok esetében a gyermekösszetevőt Blazor hogy a paraméterek megváltoztak-e. A gyermek tartalom azért tartozik a paramétertípusok ezen kategóriájába, mert a gyermek tartalom típusa RenderFragment, amely olyan delegált, amely más módosítható objektumokra hivatkozik.

Az Expanders összetevő esetében:

• Az első ShowMoreExpander összetevő beállítja a gyermektartalmakat egy potenciálisan módosítható RenderFragment-ban, így a szülőösszetevőben lévő StateHasChanged hívás automatikusan újra megjeleníti az összetevőt, és esetleg visszaállítja InitiallyExpanded értékét a kezdeti false értékre.
• A második ShowMoreExpander összetevő nem állítja be a gyermektartalmat. Ezért egy potenciálisan mutable RenderFragment nem létezik. A szülőösszetevőben lévő StateHasChanged hívás nem rendereli újra automatikusan a gyermekösszetevőt, így az összetevő értéke InitiallyExpanded nem lesz felülírva.

Az előző forgatókönyv állapotának fenntartásához használja az összetevő egy privát mezőjét az ShowMoreExpander állapot fenntartásához.

A következő módosított ShowMoreExpander összetevő:

• Elfogadja az InitiallyExpanded összetevő paraméterértékét a szülőtől.
• Hozzárendeli az összetevő paraméterértékét egy privát mezőhöz (expanded) az OnInitialized eseményben.
• A privát mező használatával fenntartja a belső kapcsoló állapotát, amely bemutatja, hogyan kerülheti el, hogy közvetlenül egy paraméterbe írjon.

Megjegyzés:

Az ebben a szakaszban található tanácsok az összetevőparaméter-tartozékokkal set kapcsolatos hasonló logikára terjednek ki, ami hasonló nemkívánatos mellékhatásokat okozhat.

ShowMoreExpander.razor:

<div @onclick="Expand" class="card bg-light mb-3" style="width:30rem">
    <div class="card-header">
        <h2 class="card-title">Show more (<code>Expanded</code> = @expanded)</h2>
    </div>
    @if (expanded)
    {
        <div class="card-body">
            <p class="card-text">@ChildContent</p>
        </div>
    }
</div>

@code {
    private bool expanded;

    [Parameter]
    public bool InitiallyExpanded { get; set; }

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

    protected override void OnInitialized() => expanded = InitiallyExpanded;

    private void Expand() => expanded = true;
}

Megjegyzés:

A módosított ShowMoreExpander változat nem tükrözi a InitiallyExpanded paraméter inicializálás (OnInitialized) utáni változásait. Bizonyos esetekben a már inicializált összetevők új paraméterértékeket kaphatnak. Ez történhet például egy elsődleges-alárendelt nézetben, ahol ugyanazt az összetevőt használják különböző részletnézetek megjelenítésére, vagy amikor az /item/{id} útvonalparaméter megváltozik, hogy egy másik elemet jelenítsen meg.

Fontolja meg a következő ToggleExpander összetevőt:

• Lehetővé teszi az állapot kívülről és belülről történő módosítását.
• Akkor is kezeli az új paraméterértékeket, ha ugyanazt az összetevőpéldányt újra felhasználja.

ToggleExpander.razor:

<div class="card bg-light mb-3" style="width:30rem">
    <div @onclick="Toggle" class="card-header">
        <h2 class="card-title">Toggle (<code>Expanded</code> = @expanded)</h2>
    </div>
    @if (expanded)
    {
        <div class="card-body">
            <p class="card-text">@ChildContent</p>
        </div>
    }
</div>

@code {
    [Parameter]
    public bool Expanded { get; set; }

    [Parameter]
    public EventCallback<bool> ExpandedChanged { get; set; }

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

    private bool expanded;

    protected override void OnParametersSet() => expanded = Expanded;

    private async Task Toggle()
    {
        expanded = !expanded;
        await ExpandedChanged.InvokeAsync(expanded);
    }
}

Az ToggleExpander összetevőt a @bind-Expanded="{field}" kötés szintaxisával kell használni, lehetővé téve a paraméter kétirányú szinkronizálását.

ExpandersToggle.razor:

@page "/expanders-toggle"

<PageTitle>Expanders Toggle</PageTitle>

<h1>Expanders Toggle</h1>

<ToggleExpander @bind-Expanded="expanded">
    Expander content
</ToggleExpander>

<button @onclick="Toggle">Toggle</button>

<button @onclick="StateHasChanged">Call StateHasChanged</button>

@code {
    private bool expanded;

    private void Toggle() => expanded = !expanded;
}

További információ a szülő-gyermek kötésről:

• Kötés összetevőparaméterekkel
• Kötés több mint két összetevő között
• Blazor Kétirányú kötési hiba (dotnet/aspnetcore #24599)

A változásészleléssel kapcsolatos további információkért, beleértve az ellenőrzés pontos típusaival Blazor kapcsolatos információkat, tekintse meg ASP.NET Core-összetevők Razor renderelését.