Blazor 组件参数不应设置在其组件之外

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"  />

如何解决

像其他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); 
    }
}