Параметр Blazor Component не следует устанавливать вне его компонента.

Question

Я изучаю Blazor. У меня нет опыта компонентного программирования.

У меня есть два компонента: DateRangePicker и RadzenCheckBox.

<RadzenFieldset Text="Test Component">
    <DateRangePicker @ref="calendar" />
    <div>
        <Radzen.Blazor.RadzenCheckBox TValue="bool" Change="@((args) => txtBoxChange(args))" />
        <RadzenLabel Text="Check" />
    </div>
</RadzenFieldset>

Теперь требование простое. Если флажок установлен, отобразить два календаря и один календарь, если он не установлен.

Я написал следующий код:

@code{
    DateRangePicker calendar;

    public void txtBoxChange(bool args) 
    {
        if (args == true) //shows one calendar when checked
            calendar.ShowOnlyOneCalendar = true;
        else //shows two calendars when unchecked
            calendar.ShowOnlyOneCalendar = false;
    }
}

Это прекрасно работает.

Но получаю предупреждение:

Параметр компонента ShowOnlyOneCalendar не должен устанавливаться вне его компонента.

Я читал несколько блогов об этом предупреждении, в которых предлагается установить отношения родительского и дочернего компонентов для связи между компонентами. Но это не родитель и ребенок.

Что я делаю не так? Как лучше всего выполнить такое требование и избежать этого предупреждения?

Answer 1

Что я делаю неправильно?

Вместо использования императивного программирования (component.Parameter1=v1), параметр компонента должен передаваться в декларативном синтаксисе:

<Component Parameter1="@v1"  Parameter2="@v2" />

Обратите внимание, что вы присваиваете значения [Parameter] напрямую:

calendar.ShowOnlyOneCalendar = true;

Вот почему Blaozrжалуется. Другими словами, вам нужно изменить его следующим образом:

<DateRangePicker ShowOnlyOneCalendar="@showOnlyOne"  />

Как исправить

Всегда следуйте этой схеме, как и другие СПА.

      (render)
Data -----------> View

Например, ваш код можно переписать следующим образом:

<DateRangePicker ShowOnlyOneCalendar="@flag" />
...

@code{
    private bool flag = false;
    public void txtBoxChange(bool args)=> flag = args;
}

(Здесь у нас есть flag data, и мы должны визуализировать представление в соответствии с данными)

Или, если вы хотите использовать императивный способ программирования, вам нужно вызвать метод и избежать присвоения значений параметру [Parameter] свойства напрямую.

<DateRangePicker @ref="calendar" />
...


@code{
    DateRangePicker calendar;
    public void txtBoxChange(bool args) 
    {
         calendar.A_Wrapper_Method_That_Changes_The_Parameter(args);
         // as suggested by @Uwe Keim, 
         //    `InvokeAsync(StateHasChanged)` is better than `StateHasChanged()`
         InvokeAsync(StateHasChanged); 
    }
}