Blazor 組件參數不應設置在其組件之外

我正在學習 Blazor。我沒有基於組件的程式經驗。

我有兩個組件： aDateRangePicker和 a 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”。

我已經閱讀了一些有關此警告的部落格，其中建議建立父子組件關係以進行組件之間的通信。但這些不是父母和孩子。

我究竟做錯了什麼？實現此類要求且沒有此警告的最佳方法是什麼？

我究竟做錯了什麼？

不是使用命令式程式 ( component.Parameter1=v1) 方式，而是應該以聲明性語法傳遞組件參數：

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

請注意，您將值[Parameter]直接分配給：

calendar.ShowOnlyOneCalendar = true;

這就是Blaozr抱怨的原因。換句話說，您需要通過以下方式更改它：

<DateRangePicker ShowOnlyOneCalendar="@showOnlyOne"  />

怎麼修

像其他SPA一樣始終遵循這種模式：

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

例如，您的程式碼可以重寫如下：

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

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

（這裡我們有一個flag數據，我們應該根據數據渲染視圖）

或者，如果您確實想使用命令式程式方式，則需要呼叫方法並避免[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); 
   }
}

引用自：https://stackoverflow.com/questions/59559195