Undvik att skriva över parametrar i ASP.NET Core Blazor

Av Robert Haken

Den här artikeln beskriver hur du undviker att skriva över parametrar i Blazor appar under omrendering.

Överskrivna parametrar

Ramverket Blazor tillämpar vanligtvis säker tilldelning av parametrar från överordnade till underordnade:

• Parametrar skrivs inte över oväntat.
• Biverkningar minimeras. Till exempel undviks ytterligare återgivningar eftersom de kan skapa oändliga återgivningsloopar.

En underordnad komponent tar emot nya parametervärden som möjligen skriver över befintliga värden när den överordnade komponenten renderar om. Oavsiktligt överskrivning av parametervärden i en underordnad komponent inträffar ofta när komponenten utvecklas med en eller flera databundna parametrar och utvecklaren skriver direkt till en parameter i den underordnade komponenten.

• Den underordnade komponenten visas med ett eller flera parametervärden från den överordnade komponenten.
• Barnet skriver direkt till värdet av en parameter.
• Den överordnade komponenten renderar om och skriver över värdet för barnets parameter.

Möjligheten att skriva över parametervärden sträcker sig även till den underordnade komponentens egenskapsaccessorer set.

Viktigt!

Vår allmänna vägledning är inte att skapa komponenter som direkt skriver till sina egna parametrar när komponenten återges för första gången.

Tänk på följande ShowMoreExpander komponent:

• Renderar rubriken.
• Visar det underordnade innehållet när det väljs.
• Gör att du kan ange inledande tillstånd med en komponentparameter (InitiallyExpanded).

När följande ShowMoreExpander komponent visar en överskriven parameter visas en modifierad ShowMoreExpander komponent som visar rätt metod för det här scenariot. Följande exempel kan placeras i en lokal exempelapp för att uppleva de beteenden som beskrivs.

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;
}

Komponenten ShowMoreExpander läggs till i följande Expanders överordnade komponent som kan anropa StateHasChanged:

• Genom att anropa StateHasChanged i utvecklarkod informeras en komponent om att dess tillstånd har förändrats och detta initierar vanligtvis återgivning av komponent för att uppdatera användargränssnittet. StateHasChangedbeskrivs mer detaljerat senare i ASP.NET Core-komponentens Razor livscykel och ASP.NET Core-komponentrenderingRazor.
• Knappens @onclick direktivattribut kopplar en händelsehanterare till knappens onclick händelse. Händelsehantering beskrivs mer detaljerat senare i ASP.NET Core-händelsehanteringBlazor.

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>

Inledningsvis beter sig komponenterna ShowMoreExpander oberoende av varandra när deras InitiallyExpanded egenskaper anges. Barnkomponenterna behåller sina tillstånd som förväntat.

Om StateHasChanged anropas i en föräldrakomponent, återrenderar ramverket Blazor de underordnade komponenterna om deras parametrar kan ha ändrats.

• För en grupp med parametertyper som Blazor specifikt kontrollerar, återger Blazor en barnkomponent om den upptäcker att någon av parametrarna har ändrats.
• För de omarkerade parametertyperna Blazor renderar om den underordnade komponenten oavsett om parametrarna ändrats eller inte. Underordnat innehåll ingår i den här kategorin av parametertyper eftersom underordnat innehåll är av typen RenderFragment, vilket är ett ombud som refererar till andra föränderliga objekt.

För komponenten Expanders :

• Den första ShowMoreExpander-komponenten anger underordnat innehåll i ett potentiellt föränderligt RenderFragment, så ett anrop till StateHasChanged i den överordnade komponenten renderar om komponenten automatiskt och skriver potentiellt över värdet InitiallyExpanded till dess ursprungliga värde false.
• Den andra ShowMoreExpander komponenten anger inte barninnehåll. Därför finns det inte någon potentiellt föränderlig RenderFragment . Ett anrop till StateHasChanged i den överordnade komponenten återställer inte automatiskt den underordnade komponenten, så komponentens värde skrivs InitiallyExpanded inte över.

Om du vill behålla tillståndet i föregående scenario använder du ett privat fält i komponenten ShowMoreExpander för att behålla dess tillstånd.

Följande reviderade ShowMoreExpander komponent:

• Accepterar komponentparametervärdet InitiallyExpanded från det överordnade objektet.
• Tilldelar komponentparametervärdet till ett privat fält (expanded) i OnInitialized händelsen.
• Använder det privata fältet för att behålla sitt interna växlingstillstånd, vilket visar hur du undviker att skriva direkt till en parameter.

Anmärkning

Råden i det här avsnittet omfattar liknande logik i komponentparameteråtkomster set , vilket kan resultera i liknande oönskade biverkningar.

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;
}

Anmärkning

Den ändrade ShowMoreExpander återspeglar inte ändringar i parametern InitiallyExpanded efter initieringen (OnInitialized). I vissa scenarier kan en redan initierad komponent ta emot nya parametervärden. Detta kan till exempel inträffa i en primär-underordnad vy där samma komponent används för att återge olika detaljvyer eller när /item/{id} vägparametern ändras för att visa ett annat objekt.

Överväg följande ToggleExpander komponent:

• Gör att du kan ändra tillståndet både inifrån och utanför.
• Hanterar nya parametervärden även om samma komponentinstans återanvänds.

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);
    }
}

Komponenten ToggleExpander ska användas med bindningssyntaxen @bind-Expanded="{field}" , vilket möjliggör dubbelriktad synkronisering av parametern.

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;
}

Mer information om överordnad-underordnad bindning finns i följande resurser:

• Bindning med komponentparametrar
• Binda över fler än två komponenter
• Blazor Tvåvägsbindningsfel (dotnet/aspnetcore #24599)

Mer information om ändringsidentifiering, inklusive information om de exakta typer som Blazor kontrollerar, finns i ASP.NET Core-komponentrenderingRazor.